CSS

Things I’ve learned about CSS grid layout

Things I’ve learned about CSS grid layout

With CSS Grid you can create complex web designs. It is very intuitive and very well supported by the major browsers.

Setting Up CSS Grid

It is very simple to get CSS Grid up and running. First of all I would recommend to download Firefox’s Developer Edition. Firefox has some great Dev Tools included, which makes it very easy to examine the CSS grid. Here is the markup for a container (parent) with six items (children) in it:

HTML

1
2
3
4
5
6

To turn our container div into a grid, we give it a display of grid:

CSS

.container { display: grid; }
But, this doesn’t do anything yet, as we haven’t defined how we want our grid to look like. It’ll position six divs on top of each other.

Defining Columns and Rows

To make it two-dimensional, we’ll need to define the columns and rows. Let’s create three columns and two rows. We’ll use the grid-template-row and grid-template-column properties. .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; grid-gap: 20px; }

More from Omaha Code


Read The Best CSS Visual Dictionary

This post was last modified on May 13, 2019 1:00 am

Share
omahacode

Founder of Omaha Code.

Published by

Recent Posts

Ozoon

Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore… Read More

3 years ago

faces

Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore… Read More

3 years ago

Floroom

Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore… Read More

3 years ago

blue mood

Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore… Read More

3 years ago

buro

Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore… Read More

3 years ago

Feelings

Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore… Read More

3 years ago