Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS grid and the future of Flexbox

Wednesday, September 6th, 2017 by Servage

css-flexboxFlexbox has been around for a while now and we have reached the point where you can safely use it in new projects. Recently, a new similar layout system called CSS Grid has been released. It comes with most of the features from Flexbox and some more. For instance, CSS Grid is a two-dimensional layout system compared to Flexbox which only supports one dimension. This article gives you a basic understanding of the new grid layout as well as the future of Flexbox and CSS Grid.

Two Dimensions

Flexbox is a one-dimensional layout system. This means it supports either rows or columns but not both. It is possible to created nested containers with Flexbox to achieve this, but the grid layout provides native support for this. To create a grid, use the “display: grid” CSS property. This should be set on the parent container element, which is usually a <div> or <nav> but is of course up to you. If you want to create a nested grid, use “display: subgrid” on an element that is inside a grid (i.e. is a grid item).

Container Properties

Let’s have a look at some new CSS properties for the grid container and its items. When working on a grid, specifying the width and heights of grid items is one of the most important aspect. Because CSS Grid is two-dimensional, it uses two properties to do this: one for height and one for width. To change the width of columns, use the grid-template-columns property. It takes a variable length of values depending on how you want to divide the width. For example, “grid-template-columns: 1fr 2fr 1fr” gives 25% to the sides and 50% to the middle if you have 3 columns in the grid.

Flexible Length Unit

The “fr” unit is something to pay special attention to. It’s a new unit called flexible length or simply fraction. It works similarly to percentages but this new unit should always be used with grids. The above width could thus be considered 25%, 50% and 25% of the width of the container. To change the height of rows, use grid-template-rows instead.

Grid Properties Continued

If you want to leave a gap between grid items, use the grid-gap property on the container, such as “grid-gap: 10px”. Similarly to how Flexbox works, you can align items using the align-items and justify-items properties. justify-items is for horizontal alignment while align-items is for vertical. Supported values include start, end, center and stretch. The default value is stretch which fills all the available space.

To align the content inside a grid item, use the justify-self and align-self properties. These properties are used for the grid items. While justify-items and align-items affect the position of the grid item (e.g. a <div>), these affect the position of the content inside that <div>. The same 4 values are supported with these properties, and stretch is again the default value.

The grid is a flexible feature for many different use cases, and it comes with many more properties than covered here. The grid is already supported by all major browsers, and when all minor browsers are supported too, the grid will likely supersede Flexbox. Therefore, it’s recommended to have a look at the rest of the properties and give CSS Grid a try at least in a test project to get a good grasp of it for the future.

CSS grid and the future of Flexbox, 5.0 out of 5 based on 1 rating
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.