Layout


Recently, I came across the following post on Twitter:

<TwitterTweetEmbed
  tweetId={'1108290606458175489'}
/>

It became known as the _Impossible Layout_ with many concluding that it couldn't be done with just CSS. Of course, I had to tackle it. In the end I came up with 2 solutions. One is a pure CSS solution, but it has a relatively minor caveat and the other requires a bit of JS, but no caveats.

## Solution 1 - Pure CSS

Looking at the layouts I saw there were three uniformly-sized images and an arbitrary amount of text. I also know that all the elements involved are siblings of each other and not three containers each with their distinct image and text, otherwise, the larger layout wouldn't be workable. And since the items are all siblings and I need to move things in 2 dimensions that I will be needing CSS Grid at some point.

Let's elaborate on that last point.

Going back to the small layout, everything is in a single column and intermixed. On the large layout, there are clearly two columns with the text on one side and images on the other. So that explains needing to manipulate the elements in one direction, horizontally. Also on the large layout, the text all sits snug together without large breaks between them where an image used to be so that means Ii'll need to move them vertically as well. And if you're working with two dimensions in CSS, then you're likely to be wanting CSS Grid to keep things tidy.

To begin, let’s create our grid container and move everything in it to the second column. And then move just the images over to the first column.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - CSS Grid only"
  src="//codepen.io/arkmuntasser/embed/eXboKv/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/eXboKv/">
    Impossible Layout - CSS Grid only
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

Now we're getting somewhere! This is starting to look like the large layout we want, but there are rows between the images when they should be immediately under each other and the height of the images are causing the rows to be too tall in some instances.

To fix this, we're going to set the `position: absolute` on the images. This will allow the text on the right to sit comfortably without the images effecting the row height. But with now the images are stacked on top of one another.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - CSS Grid + Absolute Positioning"
  src="//codepen.io/arkmuntasser/embed/MxZRZJ/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/MxZRZJ/">
    Impossible Layout - CSS Grid + Absolute Positioning
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

This is where the caveat comes in with this method. Because I am assuming the images are uniform in size, I can translate the images reproduce the desired layout. For this, I am also going to assume that you as the developer or the CMS have some way of knowing how many images there are and which number each image is. Why? So we can set an inline CSS variable (CSS Custom Property) on the images. This will let us write a very simple rule in our CSS to enable support for an arbitrary number of images.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - CSS Grid only"
  src="//codepen.io/arkmuntasser/embed/YgdMgd/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/YgdMgd/">
    Impossible Layout - CSS Grid only
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

Finally, we can add a little extra CSS for some better styling and a media query go back to the small layout.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - Final"
  src="//codepen.io/arkmuntasser/embed/YgdbKg/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/YgdbKg/">
    Impossible Layout - Final
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

And you're done!

![](https://cdn.glitch.com/2caac55b-1244-4a5a-9e9c-6389d180ccf7%2Ftenor.gif?1553317759077)

## Solution 2 - What about images of varying sizes?

Not quite.

What if you want to have images of different sizes? Or what if you can't know how many images there are or the index of each image? Then we're going to need a little JavaScript to help out.

What we need to do is find every image in the grid and as we loop over them keep a rolling sum of their heights and set a CSS variable on the images with the current height total. Then in our CSS we can simple translate the image by that amount.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - Solved!"
  src="//codepen.io/arkmuntasser/embed/PLXvWP/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/PLXvWP/">
    Impossible Layout - Solved!
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

With this, you can have an indefinite number of images, an indefinite amount of text, and images of varying sizes. Not so impossible after all.


How I Solved the Impossible Layout


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:
Layout

How I Solved the Impossible Layout

How to Build Responsive Layouts without Media Queries

Write Better Code with CSS Grid

Category:Layout

Category:
Layout