CSS Grid

CSS Grid
Nikhil
Published on 2021-07-08 16:16:02

Grid layout is a new and powerful CSS layout system that allows dividing a web page content into rows and columns in an easy way.

Basic Example

Property Possible Values

display grid / inline-grid

The CSS Grid is defined as a display property. It applies to a parent element and its immediate children only.

Consider the following markup:

<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>

The easiest way to define the markup structure above as a grid is to simply set its display property to grid:

.container {
display: grid;
}

However, doing this will invariably cause all the child elements to collapse on top of one another. This is because the children do not currently know how to position themselves within the grid. But we can explicitly tell them.

First we need to tell the grid element .container how many rows and columns will make up its structure and we can do this using the grid-columns and grid-rows properties (note the pluralisation):

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

However, that still doesn't help us much because we need to give an order to each child element. We can do this by specifying the grid-row and grid-column values which will tell it where it sits in the grid:

.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;grid-row: 2;
}

By giving each item a column and row value it identifies the order of the items within the container. View a working example on JSFiddle. You'll need to view this in IE10, IE11, or Edge for it to work as these are currently the only browsers supporting Grid Layout (with vendor prefix -ms-) or enable a flag in Chrome, Opera, and Firefox according to cause in order to test with them.

ATutorialHub Related Guide

Comments (8)

Leave a Comment

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

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website