CSS Quickies: CSS Multi-column Layout Module

#css #beginners #webdev #design

We already have CSS Flexbox and Grid to make layouting easier. You could probably achieve a column layout with both of these or any framework. But if you want to have a layout that looks like a newspaper you can use the CSS Multi-column Layout Module. It is super easy to use and after this post, you will understand it.

What we will build 👇👇👇

So let's start building this layout.
First the html body

  <body>
    <div class="container">
      <h1>CSS Quickies</h1>
      <p class="p1">
        col 1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet at voluptas quo reprehenderit iusto labore rem architecto itaque placeat laboriosam aliquid inventore temporibus facere, aperiam odio eius earum illum dolorum.
      </p>
      <p class="p2">
        col 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam ducimus nostrum possimus id, similique reiciendis amet quo. Possimus enim sequi natus sint minus autem non laudantium cumque, ab nobis ipsam!
      </p>
      <h2>I'm a sub header that spans the complete length</h2>
      <p class="p3">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero blanditiis, facilis animi iusto eveniet corporis veniam aliquid excepturi voluptates totam, sed tenetur omnis, impedit id voluptas veritatis delectus similique vitae.
      </p>
    </div>
  </body>

Nothing special here. It is plain HTML with some classes that's it.

column-count

We can tell the browser how many columns the content inside that element should be. The value can be any number but if you set it to high for example something like 99 then your layout will break. Setting it to 1 will make it a single column layout. That's it! Easy right?

column-width

Instead of saying how many columns we want we can also tell the browser the width of each column and then calculates how many rows will fit into one row. If your container is 600px wide and you set column-width to 200px then you will have 3 columns of equal height. I would suggest not setting a column smaller then 240 px if you are working on a mobile web page.

column-count and column-width together

You can also use column-count and column-width together. You can think of column-width like a minimum width. Let's say you set column-count to 3 and column-width to 200px. As long as your container is larger then 600px you will have 3 columns. If you now resize your container to be smaller the browser will use the column-width value to fit as many columns into your container as it can. This is very useful. You can make your layout a little bit more mobile-friendly with this and force a minimum width.

column-gap

If you have worked with CSS grid you know this CSS property already. It determines the gap between each column. It will also be added to your column-width. Lets say you set your column-width to 200px and your column-gap to 20px then your column width will be 220px. But not your first or last column since they will have no gap to the left for the first column and no gap to the right for the last column. It sounds complicated but this is actually what you most of the time want.

column-rule

The column rule will create an element between each column. It is basically like a border but just between columns. You can set the style, color, and width of it. If you set the width of your rule bigger then the column gap the rule will bleed into your content. The width is not added to your overall width
This is how our container will look like. You should be now able to understand it

.container {
  column-count: 3;
  column-width: 280px;
  column-rule: 3px dashed #ccc;
  column-gap: 20px;
}

column-span

Imagine you want to have a header in between columns. You can do this with column-span: all. This specific child will then span over the complete width of the container and also force the children after it to create a new row with columns. You can see this in the example. This property should be set to a child of your container where you set the column-count or column-width.

We will use this for our h2 element.