Originally published at: http://www.sitepoint.com/understanding-css-grid-systems/
Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying to garner favor.
If you’re the curious type, such as myself, than you may be asking yourself what exactly grid systems bring to the table? How do they work? And how might you go about creating your own? These are just some of the questions I will be trying to answer as I explore the various concepts at play while stitching together a basic grid system from the ground up.
What is a Grid System?
In case you’re new to CSS grid systems, we’ll start with a quick definition. In basic terms, a grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Additionally, grid system code is project-agnostic giving it a high degree of portability so that it may be adopted on new projects.
The Benefits
- They increase productivity by providing simple and predictable layout scaffolding to HTML design. The structure of a page can be formulated quickly without second guessing its precision or cross-browser compatibility.
- They are versatile in how layouts can be constructed, being adaptable in varying combinations of rows and columns. They even support nested grids for more complex use cases. No matter your layout requirements, a grid system is almost certainly well suited.
- They are ideal for responsive layouts. This is where grid systems reign supreme. They make it incredibly easy to create mobile friendly interfaces that are adaptable to different sized viewports.
The Primary Components
Grid systems include two key components: rows and columns. Rows are used to accommodate the columns. Columns make up the final structure and contain the actual content. Some grid systems will additionally include containers, which serve as wrappers for the layout.
Resetting the Box Model
First and foremost, it is important for any grid system to reset the box model. By default, the browser does not include the padding and border within the declared width and height of an element. This does not bode well for responsiveness. Thankfully, this can be fixed by setting the box-sizing property to border-box for both rows and columns:
.row,
.column {
box-sizing: border-box;
}
Now we can leverage percentages for the widths of the columns. This allows the columns to scale upwards and downwards within different viewports while maintaining the structure.
Continue reading this article on SitePoint
6 Likes
How do your column width calculations arrive at a different point than frameworks like Foundation and Bootstrap. What I mean is, why do they evenly divide the width (100%/12) while you do not? Eh, I mean what benefits does that bring over Foundation/Bootstraps way? What makes your way better than theirs?
I’m just trying to follow along. I understand your calculations but I’m just curious why you decided to not follow that evenly divided route. Is this just a case of ToMAtoe Tomatoe?
The columns do in fact add up to a width of 100% when combined with the percentage-based left margin for each column except the first one to form the gutters. Hence the complicated calculations.
The difference with Bootstrap is that it sets a zero margin on the columns, and instead sets a padding on each column to form the gutters. This simplifies the calculations with (100%/12) as you noted.
They are two different approaches for creating gutters with slight differences. It’s merely a matter of preference.
Hope this helps.
2 Likes
Nice article. A fairly complex set of ideas simply explained.
Cheers
The biggest concern with css frameworks is that we now have to explain this kind of basic css rules. For every frontend developer out there it should not be any question how this grid systems are written and how they work. If you don’t know this you should not be using frameworks like this. As you can see in this article it is very simple explaining how grid systems work and it is not of any use to explain it at all. If you read something new in this article you should consider learning css and not trying to understand how css frameworks work…
1 Like
That was a pretty stupid comment. You say as if it was rocket science, css can be learned over a weekend.
I can learn any language in a weekend. Anyone can.
Can you learn the most advanced features of any language in a weekend? No. Yours was just as unthoughtful as the above posters was.
I don’t say CSS is rocket science, and learning CSS looks easy. But CSS has a lot of unpredictable pitfalls. Pitfalls you only know if you are experienced with lots of code and big enterprise software used across all browsers and platforms. I can show you tons of CSS from which you can hardly tell what would be the outcome. For example, did you know CSS isn’t truly cascading?
But my point was that you should know the basics before you start with frameworks like this. And if you know the basics their is no need to explain grid systems. And if you don’t understand grid systems, you should not try to understand them but learn the basics. So if this article was useful for you, go and learn the basics of CSS. Again, their should not be any need to write articles about grid systems…
I think there is no prescribed way to learning a subject. Who cares how you came to learn something, as long as you did learn something.
3 Likes
Because you don’t want to learn how they did it, but why they did it this way.
Why? Are there studies showing the best way to learn something? Or is this purely your opinion based off no sound facts or information that can be proven.
I constantly see people come in here who know certain parts of CSS but not others. Do I agree with that? Doesn’t matter to me. I see those same people come back here months or years later and they all are great developers now.
I look at it in terms of exposure. I read something and maybe I see something I’ve never seen before. From there I do my research to learn about it. But if not for that first article, I would not have been exposed to it. The only thing worse that not knowing something is not knowing about what you don’t know. I view anything that exposes me to something new as beneficial, now matter how I got there.
I largely taught myself JavaScript by looking at various libraries and frameworks that would employ advanced design patterns that were way over my head. I can still vividly remember the day I first learned about the call and apply methods of functions simply looking through the source code of ExtJS. Did I learn anything from ExtJS about call and apply… no, but it did expose me to them.
This doesn’t apply to all program languages? The need of knowing why they do it in a way, and not how they do it? I’ve seen to much copy cats and programmers who do a trick over and over but have no idea what they are doing. This can lead to very odd situations where somebody with knowledge can’t understand what is happening.
And sure, it is my personal opinion. But it is an opinion based on years of experience working in big and small teams for big and small businesses. My opinion is that you can explain every rule of code you write, otherwise you shouldn’t write them at all…
Everyone comes to the first day of a new subject on a different day, we are not already born with the knowledge of CSS Frameworks or Grid layouts (perhaps we should be) what I find interesting is how similar a css GRID is to the good old days of tables… table, tr, td etc… might have to change container, row and column just for old times… and find my faithful friend the 1 pixel transparent gif 
Speaking of tables… I’m a beginner, so no laughing. I can follow what is going on with the html and css of this article. I was wondering. What if one of the columns is used as a label on a form? I don’t want the label in a “box” like the other columns. How would you differentiate the two columns?
Let me see if I am understanding you correctly, you want to make a <label> element one column and another column that contains a field of some sort for a form? If so, you can make the label element itself a column by adding the appropriate classes. I’m not sure what you mean by differentiate the two columns? You can add a unique id or class name to target a specific column in JavaScript and CSS.
Not by a long shot actually. The biggest problem with CSS grid systems is they push layout rules back into the HTML where it doesn’t belong. CSS was developed to get styling markup out of the HTML, putting it back in via classes is a bit wrong headed. But then there’s the pragmatic side of the coin - it does save a lot of time despite not being ideal.
Also, note the following:
div:after
is wrong. it’s
div::after
The single colon implementation works on IE 8 and the other browsers tolerate it, but the markup is incorrect all the same. Also, floating things around is far less useful than using a proper flexbox model. IE 9 and 10 have a smaller market share than 8 in many areas, so skipping them as well is becoming an option thank goodness.
Hi, See the website http://www.localjobpool.com
I would like to hide the green top bar in mobi
le view.
Staring code of div tag is:
<div id="info">
<div class="menuHolder">
<ul class="nav">
....
....
</div>
menuHolder and nav are defined in my custom CSS. I tried the solution like
@media screen......
like
@media screen and (max-width: 500px) {
.info .menuHolder .nav {
display: none
}
}
Please tell me how I can hide this bar in mobile view. And where should I insert the code suggested by you…
LOok at your div id="info element. Then look how you are calling it in your CSS.
.info .menuHolder .nav