CSS Grid


A common misconception I see is that responsive web development means loading up your CSS files with media queries for everything. Don't get me wrong, media queries are important and you should definitely use them, but they aren't always necessary.

Let's talk about building responsive layouts without media queries.

- [View Demo App](https://inglorious-paper.glitch.me/)
- [Download Source Code on GitHub](https://github.com/arkmuntasser/responsive-layouts-without-media-queries)

**Prerequisites**

- Working knowledge of [HTML and CSS](https://internetingishard.com/html-and-css/)
- Familiarity with [Responsive Web Development](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)

## The Big Idea

In this article, we're going to discuss three ways to build a responsive layout: multi-column, flexbox, and CSS Grid. This article in now way is trying to be a definitive resources on these concepts, but rather to demonstrate cool aspects of each approach.

### Multi-column

Multi-column is perfect for when you want to get a newspaper like effect where the content builds downward and at some point breaks into a new column.

<Code language="html" title="index.html">
{`<ul class="multicolumn">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
</ul>`}
</Code>

<Code language="css" title="style.css">
{`.multicolumn {
  column-width: 280px;
  column-gap: 20px;
}`}
</Code>

[See Multi-Column Example](https://inglorious-paper.glitch.me/#multi-column)

With the above HTML we can see the items counting downward and eventually breaking into a new column.

The reason this works is because in the CSS I've set a width of `280px` for the columns. You should think of this as a minimum width and not a strict setting. In fact, the width will grow beyond 280 until there is enough room for another column at 280 to exist. With the CSS as written, assuming there's enough content, there will be as many columns as the container can handle. You can set set specific column counts if you prefer, but when I do that I often have to acompany it with a media query, which is what I'm trying to intentionally avoid here.

Whenever you need to make that newspaper-style layout there's no better tool than to use multi-column. But it's also great for [displaying sitemaps](https://www.simpleviewinc.com/sitemap/) if that's a thing you need to do.

### Flexbox

Flexbox can work in either a row or column context. For this article, I'm going to be focusing on row which is the default setting for flex items. Flexbox also doesn't wrap by deafult, but for this article, assume that I have set the flex container to wrap it's items.

Where multi-column wraps vertically like a newspaper, flexbox wraps horizontally like text does.

<Code language="css" title="style.css">
{`.flexbox {
  display: flex;
  flex-wrap: wrap;
}\n
.flexbox > * {
  flex: 1 1 280px;
}`}
</Code>

[See Flexbox Example](https://inglorious-paper.glitch.me/#flexbox)

Looking at the above example, you can see the items count from left to right and drop down to a new line when there's no more room.

Notice the last line of my CSS.

<Code language="css" title="style.css">
{`.flexbox > * {
  flex: 1 1 280px;
}`}
</Code>

This is shorthand notation for the following properties: `flex-grow`, `flex-shrink`, and `flex-basis`. The `flex-grow` and `flex-shrink` properties tell the columns how to, well, grow or shrink in relation to each other. With them set to `1` I'm telling them to grow and shrink at the same rate in the same proportion as each other; simply put, it's what keeps all the flex items the same size.

The `flex-basis` is kind of like a minimum width for each flex item. This is what gets considered when a flex-item does or doesn't drop to a new line.

Flexbox is ideal for situations where you have a list of items, but you don't particularly care how tall the items are. As such I like to use it for navigations like breadcrumbs, a list of tags on a blog post, or even simple 2-columns layouts.

### CSS Grid

CSS Grid is [wickedly powerful](/write-better-code-with-css-grid) and can enable a plethora of complex layouts.

<Code language="html" title="index.html">
{`<ul class="grid fill">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>\n
<ul class="grid fit">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>`}
</Code>

<Code language="css" title="style.css">
{`.grid {
  display: grid;
}\n
.grid.fill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}\n
.grid.fit {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}`}
</Code>

[See CSS Grid Examples](https://inglorious-paper.glitch.me/#grid)

With Grid, you can do a similar layout to what I made with Flexbox above, but you can be a lot more explicit about how you want it to behave.

In the example above, we're repeating a simple pattern using `minmax()`. The `minmax()` function does what it sounds like, it provides a size that have a minimax size and a maximum size. In this case, my minimum is `120px` and my maximum is `1fr` which tell Grid to make it as large as it can with the room provided.

The only difference between the two Grid examples is one is using `auto-full` and the other is using `auto-fit`.

Using `auto-fill`, the Grid will err on the side of using the minimum value for each column and it will drop items to a new row when there's no more room for another column. Looking at the example, you'll also notice that it doesn't use up all the available hortizontal space.

On the other hand, `auto-fit` instead errs on the side of using the maximum value. It will grow each item to fill all the available horizontal space and dynamically shrink the columns as new items are added until the columns hit the minimum size and then it drops to a new row.

If you are building a layout or creating a design of any complexity, CSS Grid is probably the tool you'll want to reach for. It's incredibly expressive so you can get exactly the effect you desire.

## Conclusion

That's 3 ways to do responsive layouts without using a media query. There are other way certainly and I presented these 3 options as distinct from each other, but in reality you can mix and match these into each other as you need. It's very common to have a grid-item also be a flex-container.

Media queries are merely another tool in our tool belt for building responsive layouts. Use the right tool for the job, but most importantly, build incredibl layouts.

Check out the people I learned from for more information:

- [Jen Simmons](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)
- [Rachel Andrew](https://gridbyexample.com/)
- [Wes Bos](https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG)


How to Build Responsive Layouts without Media Queries

CSS Frameworks like Bootstrap, Foundation, and Bulma help us describe our HTML in terms of layout structure and components, but I'm not a fan of that approach.

I prefer an approach I learned from [Jen Simmons](https://www.youtube.com/watch?v=qNtJ5p3h2A4) where HTML is used to describe the actual content of the page. Layout doesn't ever factor into it. After all, it is _markup_ so it should be used to add semantic meaning to your content. But aside from this philosphical interpretation there are other reasons to not bake layout into your HTML.

A big one is there are fewer `div`s cluttering up the DOM which can improve performance. And it also results in cleaner looking code since there are fewer utility-classes in the HTML (though this last one is subjective as frameworks like [Tailwind CSS](https://tailwindcss.com/) make a reasonable argument for more of these utility-classes in your HTML).

- [View Demo App](https://ui-playground-grid-demo.glitch.me/)
- [Download Source Code on GitHub](https://github.com/arkmuntasser/css-grid-demos)

## Prerequisites

- Working knowledge of [HTML and CSS](https://internetingishard.com/html-and-css/)
- Familiarity with [Responsive Web Development](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)

Let's consider this following layout:

![](https://res.cloudinary.com/arkmuntasser/image/upload/c_scale,f_auto,q_80,w_800/v1564885707/PixelSnap_2019-08-03_at_19.21.49_2x.png)

Using Foundation, I might write some HTML like this:

<Code language="html">
{`<section class="articles">
  <div class="row">
    <div class="columns large-8">
      <div class="row">
        <div class="columns large-6">
          <article></article>
        </div>
        <div class="columns large-6">
          <article></article>
        </div>
      </div>
    </div>
    <div class="columns large-4">
      <article></article>
      <article></article>
    </div>
  </div>
  <div class="row">
    <div class="columns large-8">
      <article></article>
    </div>
    <div class="columns large-4">
      <article></article>
    </div>
  </div>
</section>`}
</Code>

This is fine, but what is this thing? Really? It's just a list of articles, right? So shouldn't the HTML just look like this:

<Code language="html">
{`<section class="articles">
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>`}
</Code>

That's a lot cleaner looking and a lot more descriptive of the content we have. But now that we've gotten rid of the layout, how do we add it back in? That's where CSS Grid comes in!

<Code language="css">
{`.articles {
  display: grid;
  grid-template-columns: 5fr 5fr 4fr;
  grid-template-rows: repeat(6, 7vw);
  grid-gap: 1rem;
}\n
.articles article {
  grid-column: span 1;
  grid-row: span 3;
}\n
.articles article:nth-child(3) {
  grid-row: span 1;
}
.articles article:nth-child(4) {
  grid-row: span 2;
}
.articles article:nth-child(5) {
  grid-column: span 2;
}`}
</Code>

That's it! That's all the CSS that you need to recreate the layout. I find this to be far easier to read than the framework-based solution above.

So now we've cleaned up our HTML and more accurately and concisely describe the actual content we have and we we're able to move our layout logic into just a few lines of CSS. But we haven't even gotten to the best part!

Because we're now handling layout in the CSS, we can take our simplified HTML and display it nearly anyway that we want without altering it!

What if we change our CSS to this:

<Code language="css">
{`.articles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(18, 6vw);
  list-style: none;
}\n
.articles article:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
}
.articles article:nth-child(2) {
  grid-column: 2 / span 2;
  grid-row: 3 / span 3;
}
.articles article:nth-child(3) {
  grid-column: 1 / span 2;
  grid-row: 5 / span 3;
}
.articles article:nth-child(4) {
  grid-column: 2 / span 2;
  grid-row: 7 / span 3;
}
.articles article:nth-child(5) {
  grid-column: 1 / span 2;
  grid-row: 9 / span 3;
}
.articles article:nth-child(6) {
  grid-column: 2 / span 2;
  grid-row: 11 / span 3;
}`}
</Code>

And get this:

![](https://res.cloudinary.com/arkmuntasser/image/upload/c_scale,f_auto,q_80,w_800/v1564885707/PixelSnap_2019-08-03_at_19.22.39_2x.png)

Or maybe we want something a little wilder?

<Code language="css">
{`.articles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 19vw);
}\n
.articles article {
  grid-column: span 1;
  grid-row: span 1;
}\n
.articles article:nth-child(2) {
  grid-column: 3;
}
.articles article:nth-child(3) {
  grid-column: 5;
}
.articles article:nth-child(4) {
  grid-column: 2;
}
.articles article:nth-child(5) {
  grid-column: 4;
}
.articles article:nth-child(6) {
  grid-column: 3;
}`}
</Code>

![](https://res.cloudinary.com/arkmuntasser/image/upload/c_scale,f_auto,q_80,w_800/v1564885707/PixelSnap_2019-08-03_at_19.23.33_2x.png)

Maybe something a bit more standard?

<Code language="css">
{`.articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 2rem 1rem;
}\n
.articles article {
  height: 19vw;
}`}
</Code>

![](https://res.cloudinary.com/arkmuntasser/image/upload/c_scale,f_auto,q_80,w_800/v1564885708/PixelSnap_2019-08-03_at_19.24.07_2x.png)

Across all these layouts, there's only maybe 12 lines of CSS that's different. That's the power of CSS Grid and the power of moving layout out of the HTML.

Category:
CSS Grid

How to Build Responsive Layouts without Media Queries

Write Better Code with CSS Grid

Category:CSS Grid

Category:
CSS Grid