Scribd
Upload
37 views

CSS Grid

Uploaded by

pbt8112001
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
37 views

CSS Grid

Uploaded by

pbt8112001
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS Grid

Introduction
A grid can be defined with rows and columns. You can choose how to size these row and column
tracks or they can react to the size of the content.
Direct children of the grid container will be automatically placed onto this grid.
Or, you can place the items in the precise location that you want.
Lines and areas on the grid can be named to make placement easier.
Spare space in the grid container can be distributed between the tracks.
Grid items can be aligned within their area.
Grid terminology
Grid Lines
Grid Track
Grid Cell
Grid Area
Grid Gap
Gutters are the spaces between the columns. Gutters help to separate the content.
Grid Container
A grid container can be created by setting the display property with a value of grid or inline-grid.
All direct children of grid containers become grid items.
A grid container's properties specify how browsers should layout items within the grid box
model.
Inline Grid
Explicit Grid

When we use grid-template-columns and grid-template-rows we create an Explicit Grid.


grid-template-columns specifies the number and widths of columns browsers should display in
the selected grid container.
.container{
height: 50vh;
display: grid;
grid-template-columns: 15% 60% 25%;
}
Grid-template-rows
.container{
height: 50vh;
display: grid;
grid-template-columns: 15% 60% ;
grid-template-rows: 90px 300px 200px;
}
justify-content
justify-content specifies how browsers should position a grid container's columns along its row
axis.
The justify-content property accepts the following values:

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly
Justify-content:Start
justify-content: end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
grid-row-start & grid-row-end
The CSS grid-row-start and grid-row-end properties allow single grid items to take up multiple
rows
grid-column-start & grid-column-
end

You might also like