css_grid_layouts_plus353studio

CSS Grid

CSS Grid is the new kid in the CSS town, and while not yet fully supported by all browsers, it’s going to be the future system for layouts.

CSS Grid is a fundamentally new approach to building layouts using CSS.

Keep an eye on the CSS Grid Layout page on caniuse.com to find out which browsers currently support it. At the time of writing, January 2020, all major browsers (except IE, which will never have support for it) are already supporting this technology, covering 92% of all users.

CSS Grid is not a competitor to Flexbox. They interoperate and collaborate on complex layouts because CSS Grid works on 2 dimensions (rows AND columns) while Flexbox works on a single dimension (rows OR columns).

Building layouts for the web has traditionally been a complicated topic.

css_grid_blog_post

CSS Grid is not a competitor to Flexbox. They interoperate and collaborate on complex layouts because CSS Grid works on 2 dimensions (rows AND columns) while Flexbox works on a single dimension (rows OR columns).

Building layouts for the web has traditionally been a complicated topic.

I won’t dig into the reasons for this complexity, which is a complex topic on its own, but you can think yourself as a very lucky human because nowadays you have 2 very powerful and well-supported tools at your disposal:

CSS Flexbox
CSS Grid
These 2 are the tools to build the Web layouts of the future.

Unless you need to support old browsers like IE8 and IE9, there is no reason to be messing with things like:

They interoperate and collaborate on complex layouts because CSS Grid works on 2 dimensions (rows and columns) while Flexbox works on a single dimension (rows OR columns).

Building layouts for the web has traditionally been a complicated topic.

I won’t dig into the reasons for this complexity, which is a complex topic on its own, but you can think yourself as a very lucky human because nowadays you have 2 very powerful and well-supported tools at your disposal:

CSS Flexbox
CSS Grid
These 2 are the tools to build the Web layouts of the future.

Unless you need to support old browsers like IE8 and IE9, there is no reason to be messing with things like:

Table layouts
Floats
clearfix hacks
display: table hacks

In this guide, there’s all you need to know about going from a zero knowledge of CSS Grid to being a proficient user.

The basics

The CSS Grid layout is activated on a container element (which can be a div or any other tag) by setting display: grid.

As with flexbox, you can define some properties on the container, and some properties on each individual item in the grid.

These properties combined will determine the final look of the grid.

The most basic container properties are grid-template-columns and grid-template-rows.

grid-template-columns and grid-template-rows

Those properties define the number of columns and rows in the grid, and they also set the width of each column/row.

The following snippet defines a grid with 4 columns each 200px wide, and 2 rows with a 300px height each.

.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}

 

Css grids diagram

Here’s another example of a grid with 2 columns and 2 rows:

css grids with 2 columns and 2 rows:

.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
}

Automatic dimensions

Many times you might have a fixed header size, a fixed footer size, and the main content that is flexible in height, depending on its length. In this case you can use the auto keyword:

.container {
display: grid;
grid-template-rows: 100px auto 100px;
}
Different columns and rows dimensions

In the above examples we made regular grids by using the same values for rows and the same values for columns.

You can specify any value for each row/column, to create a lot of different designs:

.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
}

 

css grids Different columns and rows dimensions

Another example:

.container {
display: grid;
grid-template-columns: 10px 100px;
grid-template-rows: 100px 10px;
}

css grids Different columns and rows dimensions 1

 

A Link to adding CSS to an HTML page

A Link to SEO

You may also like

Leave a comment

We at Plus 353 Studio would be delighted to assist. We offer a free consultation.