Exploring CSS Grid Layout

CSS Grid Layout shines at breaking a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Introduction:

A new CSS display property that is based on two-dimensional grid layout system was introduced just to give us more flexibility to develop a website. Earlier flexbox came into the market to solve the layout problems (like aligning vertically placeholder) but it could solve the problem up to an extent.

Implementation:

To implement grid layout in a web page, make display property to “grid/inline-grid/subgrid” to the container of child elements. “Inline-grid” creates an inline-level grid and “subgrid” is used if there are nested grids. The example is given below:

Properties of Parent/Child elements

Different ways to give dimensions to rows and columns to make elements responsive. 1fr means a fraction of the size of the free space available in the container.

We can also use “repeat” to make repeated columns or rows with specific dimension. For e.g. repeat 3 columns with 200px and last column with 5% of the dimension of total width.

We can set minimum and maximum value for our columns/rows dimensions such as:

The column width will not go below 100px and will not be more than 250px, no matter how much space is available.

We can specify areas according to page sections like header, main, sidebar and footer etc. with grid-template-area. For e.g.

Auto Placement of child elements

We can place the elements where we want to be by using “order” property.

This will make the position of the second div at first place. We can change its position where we want the element to be placed visually.

Now let us see how we can auto-fit and auto-fill columns….

Auto-fit and Auto-fill

Columns can be given “auto-fill” or “auto-fit” property with “minmax” just to fill all the space with specified width elements. The difference between “auto-fill” and “auto-fit” properties is that “auto-fit” fills all the available space with elements and collapsing blank space whereas “auto-fit” fills the space with expanding elements to the available space.

Positioning Line based

The positioning of elements inside parent container can be done with “grid-column” property where we can define the start point and end-point of the element. For e.g.:

1 sets the start point and -1 is the end-point of the element. In the given example, the position of element A starts from 1 and it goes until the end of the layout. There are more different ways to implement this like we can use “grid-column: 3 / span 5;” In this starting position of the column will be 3 and ending position will go till 5 for the second column. For e.g.:

Browser support list for CSS-Grid
Find below the link for browser support for CSS-Grid
https://caniuse.com/#feat=css-grid

Stay tuned… in my next post, I will be sharing information regarding more grid properties that are available.

Leave a Reply

Your email address will not be published. Required fields are marked *