An Introduction to the CSS Grid Layout Module

As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module.

In this introductory tutorial, I’ll introduce you to this relatively new CSS feature, I’ll discuss the current browser support, and I’ll show you using some examples how the CSS Grid Layout Module works.

[author_more]

What is the CSS Grid Layout Module?

The core idea behind the Grid Layout is to divide a web page into columns and rows, along with the ability to position and size the building block elements based on the rows and columns we have created in terms of size, position, and layer.

The grid also gives us a flexible way to change the position of elements with only CSS without any change to the HTML. This can be used with media queries to alter the layout at different breakpoints.

Browser Support

Before we can dive more into Grid Layout, it’s good to know the status of browser support, and how we can enable this feature in current browsers.

Internet Explorer

The first proposal of Grid Layout was developed by Microsoft, and IE10 shipped with an -ms prefixed implementation. If you take a look at support on Can I Use, you’ll see that both IE11 and Edge also support Grid Layout.

Chrome and Opera

To enable Grid Layout in browsers that use the Blink rendering engine, like Chrome or Opera, navigate to chrome://flags (or opera://flags, but either works in Opera) using the browser’s address bar and look for the Enable experimental Web Platform features flag. After you enable it, you will be asked to relaunch the browser.

It’s recommended to use either Chrome or Opera with the examples in this article, or with your own experimentations, as the Blink engine has the most updated implementationsof Grid Layout.

Firefox

Navigate to about:config, search for the layout.css.grid.enabled flag, then double click or press enter to toggle it to true.

Grid Layout Polyfill

A polyfill is also available to provide a working implementation of the Grid Module for current browsers.

A Grid Layout Example

Let’s start with an example to see the power of Grid Layout, and then I’ll explain some new concepts in more detail.

Imagine you want to create a Twitter app with four full height columns layout (Tweets, Replies, Search, and Messages), something abstracted and similar to the screenshot below.

Here is our HTML:

[code language="html"]
<div class="app-layout">
<div class="tweets">Tweets</div>
<div class="replies">Replies</div>
<div class="search">Search</div>
<div class="messages">Messages</div>
</div>
[/code]

Then we will apply some CSS to the .app-layout container element:

[code language="css"]
.app-layout {
display: grid; /* 1 */
grid-template-columns: 1fr 1fr 1fr 1fr; /* 2 */
grid-template-rows: 100vh; /* 3 */
}
[/code]

View a demo here

Here is the explanation of what we’ve done in the previous CSS:

1. Set the display property to grid.
2. Divide the container element into four columns, each column is 1fr (one fraction) of the free space within the grid container.
3. Create one row and set the height to be 100vh (full viewport height).

As you can see, the Grid Layout Module adds a new value to the display property which is grid. The grid value is responsible for setting the .app-layout element to be a grid container, which also establishes a new grid formatting context for its contents. This property is required to start using Grid Layout.

The grid-template-columns property specifies the width of each grid column within the Grid, and in our case it divides the .app-layout container to four columns; each one is 1fr (25%) of the available space.

The grid-template-rows specifies the height of each grid row, and in our example we only created one row at 100vh.

a layout with two columns and two rows would look like this:

And we would use the following CSS:

[code language="css"]
.app-layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50vh 50vh;
}
[/code]

View a demo here

We can also achieve the above example only on small screens by wrapping the code inside a media query. This opens up a great opportunity for us to customize the layout differently in different viewports. For example, we can create the previous layout only on viewports under 1024px as follows:

[code language="css"]
@media screen and (max-width: 1024px) {
.app-layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50vh 50vh;
}
}
[/code]

Continue reading %An Introduction to the CSS Grid Layout Module%

by Ahmad Ajmi via SitePoint