CSS: column-count & column-gap

What a time saver! Thanks to reading through a few CSS properties on w3schools, I just learned about column-count and column-gap. And I got to immediately apply it to a page of the Alaska State Library website that I edit.

In short, I got to cut my style code by quite a bit without changing the aesthetics. Plus, I don’t have to keep rearranging my columns to make them pretty. AND the semantics become much more ADA-friendly: one list in one div rather than 3-4 unordered lists broken up by several divs.

Before:
.column1, .column2, .column3, .column4{
float:left;
margin-left:10px;
width:125px;
}
.column1 ul, .column2 ul, .column3 ul, .column4 ul, .col1 ul, .col2 ul, .col3 ul{
list-style-type:none;
}
.column1 ul li a, .column2 ul li a, .column3 ul li a, .column4 ul li a{
padding:5px 15px;
}
.col1, .col2, .col3{
float:left;
margin-left:10px;
width:175px;
}

After:
.column-3{
margin-left:15px;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
}
.column-4{
margin-left:15px;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
}

I hope you’ve learned something new, too, like I did. Save yourself the time and let the code do the work!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s