Sidebar layout using Grid & TailwindCSS
Tags: css, tailwindcss, grid
Published: 2021-01-27 02:01:49

##Implementing Tailwind into your [Codepen](https://www.codepen.io) project

1. In the CSS window, click on the gear icon.
2. In the "Add External Stylesheets" section, search for "tailwind" and select "tailwindcss" from the dropdown menu.
3. Hit "Save & Close"

##Building the grid

1. In the html section, start with a `<section>` tag and build out some base styles

```
<section class="w-full max-w-6xl mx-auto px-4 m-4 border-2 border-red-600">
```

taking a mobile-first approach, establish this `<section>` as a full-width element with the tailwind class `w-full`, and a max-width of 72rem, or `max-w-6xl`. 

Next, let's add some margin and padding to get this area some breathing room.

`mx-auto` sets the margin left & right to auto, which helps center this section on the page; while m-4 sets the margin on all sides to 4rem, or 16px. `px-4` sets the padding left & right to 4rem, or 16px.

The `border-2` class adds a border around the element with a width of 2px. The `border-red-600` class adds a red color to the existing border. These two border classes are for demonstration purposes, so you can easily see where the `<section>` tag ends, and the following tags begin.

2. Inside the section tag, we will need a `<div>` to establish our grid property.

```
<div class="grid md:grid-cols-12 gap-5 p-4 m-2">
```

`grid` is shorthand for `display:grid`. This will establish our `div` as a grid element so we have a main section that will take up the majority of the space, and a sidebar element next to it. `md:grid-cols-12` says that on medium size screens (screens with a minimum width of 768px) the div will span 12 grid columns. `gap-5` acts as our `grid-gap` and will add a grid-gap of 1.25rem, or 16px. `p-4` and `m-2` set the padding and margin to 1rem and 0.5rem, respectively.

##Adding properties inside the Grid element


3. Now that our grid layout has been established, we need our `<main>` and `<aside>` tags.

```
<main class="md:col-span-9 p-4 border-2 border-green-600">
```

Similar to earlier when we established the `div` element as a 12 column grid, adding `md:col-span-9` will tell this `<main>` element to span the width of 9 of our available 12 columns on medium size screens. `p-4` adds 1rem of padding in the element. And like before, the border elements are just for fun. 

Inside of the `<main>` tag I also added a headline, subhead, and paragraph of text. Go ahead and add those now.

```
<h1 class="text-3xl">Headline</h1>
<h3 class="text-xl">Subheadline</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum voluptas saepe sit qui, veniam, distinctio quos suscipit provident dolorum tempore officia eaque, delectus reiciendis. Ad odio quam ullam nostrum nisi.</p>
```

`text-3xl` and `text-xl` set the font-size of these header tags as 1.875rem and 1.25rem respectively.

4. After the closing `</main>` tag, add an `<aside>` html element.

```
<aside class="md:col-span-3 md:pt-0 p-2 border-2 border-blue-600">
```

On medium screens, this section will span 3 of our available 12 columns using `md:col-span-3`, have a padding-top of 0px on medium screens, padding of 0.5rem on all sides, and as before, the borders are for fun!

Add a `<p>` tag with some placeholder text inside of the `<aside>` element and these two elements should live side-by-side on medium size screens and larger, and should stack, with the `<main>` area above the `<aside>` area on smaller screens.

##Viewing our finished product 

Let's take a look here, [at this codepen example.](https://codepen.io/hannah-saurusrex/pen/wvzVjwV)

![Screen Shot 2021-01-26 at 6.58.37 PM](https://dev-to-uploads.s3.amazonaws.com/i/dpt4wfl5lvexjub0wrzs.png) 

Notice how the css column of our Codepen project is empty? -- we wrote all of our css using Tailwind classes inside of our html elements!

I like to think of Tailwind as writing a short-hand css. Tailwind assumes knowledge of css, so I suggest learning css first and slowly incorporating Tailwind into your projects.

##Resources I find helpful

Two Tailwind resources I love to use are the [TailwindCSS docs](https://tailwindcss.com/docs) and [this TailwindCSS Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet)

If you are interested in becoming more familiar with CSS Grid, I suggest [Wes Bos' **FREE** css grid course.](https://cssgrid.io/)

##Thank you!

Thank you so much for reading. Let me know if you have any questions, suggestions or comments. 

You can find me on Twitter [@hannahrosecodes](https://twitter.com/hannahrosecodes)