Some useful CSS tricks for beginners

In my day-to-day work, I’ve found I use some CSS3 features constantly and others hardly ever. I thought it might be useful to share those I’ve used most often. These are CSS3 goodies that can make life easier, especially in responsive designs. They solve problems that used to be minor headaches with relative ease.

CSS multi-column layouts for responsive designs

Ever needed to make a single piece of text appear in multiple columns? You could solve the problem by splitting the content into different markup elements and then styling accordingly. However, altering markup for purely stylistic purposes is never ideal. The CSS multi-column layout specification describes how we can span one or more pieces of content across multiple columns with ease. Consider the following markup:

<main>
    <p>lloremipsimLoremipsum dolor sit amet, consectetur
<!-- LOTS MORE TEXT -->
</p>
    <p>lloremipsimLoremipsum dolor sit amet, consectetur
<!-- LOTS MORE TEXT -->
</p>
</main>

With CSS multi-columns you can make all that content flow across multiple columns in a number of ways. You could make the columns a certain column width (for example, 12em) or instead you could specify that the content needs to span a certain number of columns (for example, 3).

Let’s look at the code needed to achieve each of those scenarios. For columns of a set width, use the following syntax:

main {
  column-width: 12em;
}


Fixed columns, variable width

If you’d rather keep a fixed number of columns and vary the width, you can write a rule like the following:

main {
  column-count: 4;
}

Adding a gap and column divider

We can take things even further by adding a specified gap for the columns and a divider:

main {
  column-gap: 2em;
  column-rule: thin dotted #999;
  column-width: 12em;
}


To read the specification on the CSS3 Multi-column Layout Module, visit http://www.w3.org/TR/css3-multicol/.

For the time being, despite being at CR status at the W3C, you’ll likely still need vendor prefixes on the column declarations for maximum compatibility.

The only caveat I would place on using CSS multi-column is that for longer spans of text it can lead to a flawed user experience. In these instances the user will have to scroll up and down the page to read the columns of text, which can become a little laborious.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares