Header Ads Widget

css grid layout

My codding spot January 08, 2022

 There are many layouts used to design websites. Grid layout is one of them. In this post, you will learn basics of grid layout.


Precap

  • What is grid layout?
  • How to create a grid layout?
  • Properties used to create a grid 
  • What are grid-columns & grid-rows?
  • Properties are used to set gaps between grid rows and grid columns.
  • What are grid lines?
  • Set the size and position of grid items



What is CSS grid layout?

CSS grid layout divides a webpage into many parts with rows and columns and adjustable size and position.

How to create a grid layout?

Steps to create the grid layout

1. To create a grid layout first you have to define a grid container (parent element).
2. After that define the child elements of the grid container. 
3. Then set the display property of the grid container to grid or inline-grid.
4. Specify grid columns and grid rows.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<title>grid layout</title>
<style>
.container
{
height:500px;
width:300px;
background-color:#ffcccc;
display:grid;
text-align:center;
}
.container
{
padding:20px;
}
.item1,.item3,.item5, .item7, .item9
{
background-color:#b25c66;
}
.item2,.item4,.item6, .item8
{
background-color:#cbb566;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">grid item 1</div>
<div class="item2">grid item 2</div>
<div class="item3">grid item 3</div>
<div class="item4">grid item 4</div>
<div class="item5">grid item 5</div>
<div class="item6">grid item 6</div>
<div class="item7">grid item 7</div>
<div class="item8">grid item 8</div>
<div class="item9">grid item 9</div>
</div>
</body>
</html>

Output:-
CSS grid
CSS grid

After the display property is set to grid the normal parent HTML element becomes a grid container and all its direct child elements are called grid items.

This layout is very simple.  The grid items are arranged in stack format. Grid view is made of rows and columns, so to arrange grid items in rows and columns grid properties are used. The grid properties create a complete grid layout.

Properties used to create a grid layout

What are grid-columns and grid-rows?

The vertical series of grid items is called grid-columns and the horizontal series of grid items is called grid-rows.

grid-template-columns property

grid-template-columns property specifies the number of columns and size of columns.

grid-template-rows property

grid-template-rows property specifies the number of rows and size of rows.

Example 1
The auto value arranges grid items in equal sizes.


1
2
3
4
5
.container{
......
grid-template-columns:auto auto auto;
grid-template-rows:auto auto auto;
}

Output:-
3 columns Grid layout (grid-template-rows & grid-template-columns properties)
3 columns Grid layout (grid-template-rows & grid-template-columns properties)

For example, the auto value is specified 3 times, which creates 3 equal size rows and columns. 

If you want 2 columns then specify the size of grid-template-columns property two times.

 Example 2
In example, the total number of grid items is 8.

1
2
3
4
.container{
......
grid-template-columns:auto auto;
}

Output:-
2 columns grid layout (grid-template-columns:auto auto;)}
2 column grids (grid-template:auto auto;) Example
Example 3
Rows and columns are in different sizes.

1
2
3
4
5
.container{
......
grid-template-columns:50px 100px 150px;
grid-template-rows:70px 200px 150px;
}

Output:-
Grid layout:- different sizes rows and columns
Grid layout:- different sizes of rows and columns

5. Specify Grid gaps between rows and columns

What is the grid-gap?

Grid gap is space between rows or columns.
The space between columns is called column gap.
The space between rows is called row gap.

grid-column-gap property

grid-column-gap property adds space between all grid columns.

Example
The space between columns is 15px.

1
2
3
4
5
6
.container{
......
grid-template-columns: auto auto auto;
grid-template-rows:auto auto auto;
grid-column-gap:15px;
}

Output:-
Grid layout (grid-column-gap property)
Grid layout (grid-column-gap property)

grid-row-gap property

the grid-row-gap property adds space between all grid rows.

Example
The space between rows is 10px.

1
2
3
4
5
6
.container{
......
grid-template-columns: auto auto auto;
grid-template-rows:auto auto auto;
grid-row-gap:10px;
}

Output:-
Grid layout ( grid-row-gap property )
Grid layout ( grid-row-gap property )

grid-gap property

grid-gap property is a shorthand property for about two properties grid-column-gap and grid-row-gap. The first value specifies the row gap and the second value specifies the column gap.

Example

1
2
3
4
.container{
......
grid-gap:20px 10px;
}

Output:-
Grid layout (grid-gap property)
Grid layout (grid-gap property)

If you want to apply the same value for both row and column gaps then specify only one value.

6. Set the size of grid items

With grid-column-start and grid-column-end properties, you can change the width of grid items.
Similarly, grid-row-start and grid-row-end properties modify the height of grid-items.

As a value, you have to specify the grid line number. So first understand that.

 what are grid lines?

Grid lines are the lines between rows and columns.
The lines between rows are called row lines and the lines between columns are called column lines.

Look at the figure
Grid layout:- grid lines (row lines and column lines)
Grid layout:- grid lines (row lines and column lines)



grid-column-start property

The grid-column-start property specifies starting (horizontal) line number of the grid item.

grid-column-end property

Specifies the line number where you want to end the spanning of the grid item. ( horizontal direction )

Example
Grid item 5 starts at column line 1 and end at column line 4. (Total grid items are 8).

1
2
3
4
5
.item5
{
grid-column-start:2;
grid-column-end:4;
}

Output:-
Grid layout (grid-column-start & grid-column-end property)
Grid layout (grid-column-start & grid-column-end property)

grid-row-start property


The grid-row-start property specifies starting (vertical) line number of the grid item.

grid-row-end property


Specifies the line number where you want to end the spanning of the grid item. ( Vertical direction)

Example
Grid item 1 starts at row line 1 and ends at row line 3.

1
2
3
4
.item1{
grid-row-start:1;
grid-row-end:3;
}

Output:-
Grid layout (grid-row-start and grid-row-end properties)
Grid layout (grid-row-start and grid-row-end properties)

How to change the position of grid items?

Using grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties also modifies the position of grid items.

Example
The position of grid-item5 and grid-item6 interchange with each other and also grid item1 and grid item4 positions changed with each other.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.item1{
grid-row-start:2;
grid-row-end:3;
}
.item4{
grid-row-start:1;
grid-row-end:2;
}
.item5{
grid-column-start:3;
grid-column-end:4;
grid-row-start:2;
grid-row-end:3;
}

Output:-
Grid layout (modification in position of grid items)
Grid layout (modification in the position of grid items)

grid-area property

The grid-area property is a shorthand property for modification in the size and position of grid items. grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties are specified in the grid-area property. All values are separated with /.

Example
grid-item5 takes the position of grid-item6. The order of values is in the following order. ( grid-row-start, grid-column-start, grid-row-end, and grid-column-end).

1
2
3
.item5{
grid-area:2/3/3/4;
}

Output:-
Grid layout ( grid-area - shorthand property)
Grid layout ( grid-area - shorthand property)


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments