| 0 | kirasiris | Categories: Tags: ,

CSS3 Logo

Alright, let’s say, I was frustrated!!. I created a grid system for my archives pages but for some reason it did not work out. Some of the entries in my blog page were off and the issue could easily be seen when there were, let’s say 3, 6 or 9 entries.

I began to do my research to see if there was some random folk having the same troubles as myself and perhaps to see if he had solved it already to implement it into my website; unfortunately I did not find anyone with the same trouble as me.

Bootstrap 4 has been out for quite a while already but I have refused to move myself into it, not because of not being able to use it but because every version that comes out, its released as a beta version which pretty much tells you…its not ready for production. Perhaps my low self-esteem told me to ignore it and find a solution and it did; I could easily find the source code I was looking for and to be honest there was not much of a difference between my grid system version and the one Bootstrap has but just a single line, display: inline-block.

Here I am with my new code:

.col {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  column-gap: 1.25rem;
  orphans: 1;
  widows: 1;
}

.col article{
  display: inline-block;
}

To demonstrate what I mean I decided to share a codepen code I created long ago. Here it is:

See the Pen
Grid System with pure CSS
by Kevin Fonseca (@kirasiris)
on CodePen.

Obviously you can play with it. As far as I know display: inline-blockdisplay: inline-table and display: inline-grid create the same effect but with some variety.

Leave a Reply

Back to Top