CSS Grids — No More Floats or Flexbox

Moe Himed
Moe Himed
Aug 9, 2017 · 6 min read

The grid. It’s pure chocolate css and currently a hot thing in the web development world. My interest was peaked after watching a presentation from Morten Rand-Hendriksen about grids. The css grid concept has been around since 2012, but a few months ago, all major browsers (except for friggin Internet Explorer) have given support for the grid layout so it makes sense to start using them.

The benefit is that you no longer need a framework like Bootstrap so you won’t need a 120kb file for a grid system. It’s also more flexible then flex-box giving you control in positioning items in rows and columns at the same time. It allows you to take something from (using bootstrap terminology) the 2nd row of a 3rd column and have it transition to become the item in the 1st row and 1st column when collapsed for tablet and mobile. I recommend you go here for more on the multi-dimensional layout aspect.

There are a good number of tutorials available but the one thing I was looking for was hard to find. That thing is a grid layout that had a set number of rows and columns for desktop that collapsed for tablets into two columns and then one full width column for mobile users. There are some using a property called grid-template-areas where you name each section like header or footer. My goal was to use the grid with straight up numbers with 6 images. There might be more than one way to do things here, but this was my way. The final product can be found at the end.

The first thing you need to know is that there are a good number of terms that you’’ll need to know. I think Mozilla does the best job of explaining them here. We’ll only be covering some of them.

Lets look at what a simple bare bones css grid layout looks like:

display: grid

Just like we would use display: block or display: inline to affect the outer display of an element, we use display: grid to make the element container behave like a block element and also lay out the content according to the grid model. Each child element div does not have any grid properties added to it yet.

grid-template-columns: 1fr 1fr 1fr

The grid-template-columns property defines the line names and and size of the grid columns.The fr unit represents a fraction of the available space in the grid container. If there are 3 equal column units, then each one represents 1/3. This is the equivalent of bootstrap floating elements and giving them a width of 33.33333%. No need for a clear-fix anymore.

There are a few different values you could use for the grid-template-columns property, but for simplicity sake, I’ll just show an example using percent:

The 2nd and 3rd column have a set percentage and the remaining fractional unit will take up the remaining space which in this case would be 1/2.

Another value that can be used is the minmax() function which acts like a media query where minimax(100px, 400px) would allow a column unit to be within 100 and 400 pixels in width.

grid-gap: 15px

The grid-gap is basically the space between each column and row. You can have a grid-column-gap or a grid-row-gap to modify them independently; grid-gap is shorthand for combining both of them.

MORE ADVANCED STUFF

We’ve so far been working with one row. If you have multiple rows, you can use the grid-template-rows property to declare the size of each row’s height.

grid-template-rows: 100px 300px

Here we have the top and bottom rows having set heights of 100 and 300px. The grid is defined by lines. The rows and columns are called grid tracks and each unit within the rows are called grid cells .

grid-row: 3

grid-column:3

You can choose where you want a cell to start using the properties grid-row (shorthand for grid-row-start and grid-row-end) and grid-column (shorthand for grid-column-start and grid-column-end) . For example purposes, here we take the second row and have its starting point be the 3rd row and 3rd column. We also make the box-3(our 3rd html element) start on the second row and span from its starting line 2 to the last line 4 on the right. I used the Firefox grid inspector tool to show the actual lines that separate each cell.

Now what if we want these three columns to be only two with one cell spanning the whole row. We have to set grid-template-columns to 50% (you would see the value of this with more rows) and we explicitly set the third box to span multiple columns with grid-column starting at line 1 and ending at line 3.

Lets say you want to use the bootstrap offset feature and leave some white space. No problem. Just set the grid-column to start past the first line. Here we set it at grid-column: 2/3 which again is shorthand for grid-column-start: 2 and grid-column-end: 3

And the final part is making the width of each cell span the width of the whole screen which is what we want for mobile users. We simply set grid-template-columns to 100% and if the grid-row or grid-column was set to a value, we can set them to grid-row: auto; and grid-column: auto, unless we want them to be positioned in a different order.

There are a lot more features that can be implemented with css grids and I expect that they will have widespread usage soon. Check out the final product HERE and feel free to leave comments.

Moe Himed is a front-end developer and the owner of Critical Web Solutions which offers web hosting on cloud servers and dedicated servers.

Moe Himed

Written by

Moe Himed

I'm a front-end web developer who loves to smash bugs.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade