Mastering Grid Layouts: A Detailed Overview


Grid container
A grid layout starts by setting a container element as grid using display property.
display: grid;
Grid Items
The child items inside the container is called grid items.
Defining rows and columns
In a grid we can define as many as rows and columns we want using
grid-template-columns:(for columns)
grid-template-rows(for rows)
I want to describe it in the simple way like as we can say it like rows defines the height
Think of rows as horizontal "slices" of the grid.
and grid-template-columns describes the width of the items inside the container.
Think of columns as vertical "slices" of the grid.
display: grid;
grid-template-rows: 100px 200px 100px 200px;
Here we can observe that the container items are displayed in the form of item1 of height 100px item2 of 200px Item3 of 100px and item4 of 200px.
display: grid;
grid-template-columns: 100px 200px 100px 200px;
}
Here the items of width are displayed as
100px of width for item1
200px of width for item2
100px of width for item1
200px of width for item2
Rows = Height (controlled by
grid-template-rows
).Columns = Width (controlled by
grid-template-columns
).
grid-template-areas:
This allows to name sections of your grid and assign each item to specific area.
Placing grid items
Here we can control the placement of the item
Subscribe to my newsletter
Read articles from GAJULA VAISHNAVI directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

GAJULA VAISHNAVI
GAJULA VAISHNAVI
I am aspiring full stack java developer