Building Awesome Layouts with CSS Grid

CSS grid layout or CSS grid is a technique in CSS that allows web developers to create complex responsive web design layouts more easily and consistently across browsers (Safari, Chrome, Firefox, Edge…….).

We’ll be talking about the very basics of CSS Grid leaving out everything you shouldn’t care about until you’ve understood how it works.

Before we dive into the CSS Grid, let's take a quick glance at the CSS display property which is very important while using the CSS grid. The display CSS property specifies the type of rendering box used for an element. We’ll be talking about the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid.

display: valuewhere value can be “grid(generates block-level grid), inline-grid(generates inline-level grid), and subgrid(when nesting grids in another grid)”. We’ll be using display:grid; throughout the article.

Time to make our first grid.

We are going to use the display property to turn our .wrapper div into a grid and give it some space with the grid-gap property.

How our grid looks with the code above

The grid-gapproperty is used to create space/gutter between grid-items.

POSITIONING GRIDS

The first thing we need to do is to assign a name to our grid-items, the name can be anything but must not contain empty space.

After naming our grid-items, use the grid-template-areas to specify the position of our grid-items. Add the following code to our .wrapper{} to create a grid with 2 rows and 3 columns.

In order to add an empty space between grid-items, we replace that particular grid-item we want to replace with a “.”, we can use as many “…….” as we like as far as there’s no space between the dots(“….”)

The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns😴😴😴. In other words, it is used to set the number and size of columns we want our grid to possess😎😎😎 . Unlike using grid-template-areas, we don’t need to name our grid-items.

Let’s say we want our grid to have four columns whereas, the first column is 100 pixels, the second is 200, and the third and fourth should take up the remaining available space evenly.

We can achieve this by 👇👇👇

grid-template-columns: 100px 200px auto;

Let's play with this a little. We’re gonna make “E” to span 2 columns making “F” to be directly below “C”. In order to achieve this, Let me introduce you to grid-column: X / Y; where X and Y are the starting and end position of the grid-item respectively.

grid-template-rows: 100px 200px auto;

Using minmax() to specify dynamically sized tracks

In a situation whereby we want the size of our grid column or row to be dynamic, we can use minmax(minValue, maxValue).

minmax(10px, 20px) means the grid-item cannot not be less than 10px and cannot be bigger than 20 px.

min-content and max content: Keyword representing the smallest and largest content contribution of the grid-items occupying the grid.

In a situation where we have over 10 grid-items, it’s not smart of us to start naming sizing our grids one after the other instead, we can use repeat(noOfGrids, size(s)).

We can pass auto-fill and auto-fit as the first argument of the repeat function instead of a number e.g repeat(auto-fill, minmax(50px, auto))or repeat(auto-fit, minmax(min-content, auto));

“Its advisable to always use the minmax()while sizing our grid-items because of responsiveness.”

By default CSS grid arranges our grid-items in rows i.e from left to right. Sometimes we might want to arrange our items from top to bottom, that is where grid-auto-flow comes in.

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */

grid-auto-flow: row Versus grid-auto-flow: column

You must be wondering, What the “dense” keyword does, if there is an empty space and you want the next available grid that fits into the grid to be placed there, we use the “dense” keyword.

grid-auto-flow: column VS grid-auto-flow: column dense;

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store