Blog

Introduction

CSS Grid is new layout supported browsers. If we compare to with Bootstrap then CSS Grid does not require to include any external libraries, By adding CSS rules to parent (Grid Container) and to child elements (Grid Items).

CSS Grid is a two-dimensional grid layout, we can work with columns and rows. In comparison to Flexboxes (which is one-dimensional), the CSS Grid layout system provides you to build more complex layouts. It is possible we can use both: Flexbox and Grid Layout in CSS

In Bootstrap Grid Layout system it’s much cleaner to define the layout structure in CSS only. You don't need to include layout definition within your codes. This makes the code easier to read and you are able to quickly adapt the layout if needed without needing to rearrange your code.

 

Terminology

 

Grid Container

The grid container is the parent element of a grid layout system. The CSS rule display: grid needs to be applied to this container in order to active the CSS Grid layout mode.

Grid Line

Grid lines are the lines which define the structure of the grid and are dividing the grid into cells. Lines in a grid can be either vertically (dividing the grid into columns) or horizontally (dividing the grid into rows).

Each grid line has a unique number starting from 1 on the left side of the grid / on top of the grid. This line numbering is used to define grid area. You’ll see a practical example later on.

 

 

Grid Cell

A grid cell is the smallest unit inside a grid and is the area between two adjacent column grid lines and two adjacent row grid lines.

Grid Area

Inside a grid, a grid area can be any area which is surrounded by four lines. Each area can comprise of any number of cells.

Grid Item

Any direct child elements of the parent grid container are called grid items.

 

 Defining Grid Column And Rows

 

 grid-template-columns / grid-template-rows

The next step is to define grid columns and rows. This is done by adding CSS properties grid-template-columns and grid-template-rows to the definition of class container:

 

Location of Grid Items

 

grid-column-start / grid-column-end / grid-row-start / grid-row-end

 

So far our example showed that the defined grid elements are put into the grid cells one by another. Each grid item is placed inside one grid cell. You can change the grid item’s location and define that a grid item should span across multiple grid cells by using CSS properties grid-column-start, grid-column-end, grid-row-start, and grid-row-end.

To specify the location with these properties we’re referring to specific grid lines. Remember the lines are automatically numbered starting by 1 (both in row and column direction).

 

Browser Support

Since the beginning of 2017 CSS Grid layout support has been shipped with the public released of all majors browsers like Firefox, Chrome, Opera, and Safari.

The IE/Edge version of the specification is prefixed with an -ms prefix and the properties implemented in IE/Edge. This means that the default CSS property names like:

 

grid-template-columns needs to be changed in IE/Edge to: -ms-grid-columns