CSS -Grid
CSS Grid Layout is the most powerful layout system available in CSS. It is a two-dimensional system, meaning it can handle both columns and rows. Flexbox is one-dimensional. First, we used tables, then floats, positioning and inline-block, but all of these methods are hacks methods. Flexbox helped to make for simpler one-dimensional layouts, but not work on two-dimensional. Grid is solved this problem. Flexbox and Grid, work very well together. The grid is similar to the flexbox.
Grid Container
The element on which display: grid s applied. It’s the direct parent of all the grid items.
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>Grid Item
The children of the grid container.
<div class="container">
<div class="item "></div>
<div class="item ">
<p clsaas= "sub-item">
</div>
<div class="item "></div>
</div>Properties for the Grid Container
Display
The element as a grid container and establishes a new grid formatting context for its contents. It is two values: display: grid | inline-grid.
grid-template-columns, grid-template-rows
The columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.
<div class="container">
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
grid-template-areas
A grid template by referencing the names of the grid areas which are specified with the grid-area property.
grid-template
The grid-template is a shorthand property of grid-template-columns, grid-template-rows, and grid-template-areas.
grid-column-gap and grid-row-gap
Specifies the size of the grid lines. The gap between two columns/rows.
grid-gap
The grid-gap is a shorthand property of grid-column-gap and grid-row-gap.
Justify-items
Aligns grid items along the inline (row) axis.
Start
justify-items: start The aligns items to be flush with the start edge of their cell.
End
justify-items: end The aligns items to be flush with the end edge of their cell.
Center
justify-items: center The aligns items in the center of their cell.
Stretch
justify-items:stretch This is the default value.
align-items
Aligns grid items along the block (column) axis.
Start
align-items: start The aligns items to be flush with the start edge of their cell.
End
aligns-items: end The aligns items to be flush with the end edge of their cell.
Center
aligns-items:center The aligns items in the center of their cell
stretch —
aligns-items: stretch This is the default value, fills the whole height of the cell.
place-items
It is a shorthand property of aligns-items and justify-items .
Justify-content
Justify-content is applying on the grid container. This property aligns the grid along the inline (row) axis.
start
justify-content:start The aligns the grid to be flush with the start edge of the grid container.
end
justify-content:end The aligns the grid to be flush with the end edge of the grid container.
center
justify-content:center The aligns the grid in the center of the grid container
stretch
justify-content:stretch This is a default value. The resizes the grid items to allow the grid to fill the full width of the grid container.
space-around
justify-content:space-around The place an even amount of space between each grid item, with half-sized spaces on the far ends.
space-between
justify-content:space-between The place an even amount of space between each grid item, with no space at the far ends.
space-evenly
justify-content:space-evenly The place an even amount of space between each grid item, including the far ends.
Align-content
This property aligns the grid along the block (column) axis.
Start
align-content:start aligns the grid to be flush with the start edge of the grid container
End
align-content:end aligns the grid to be flush with the end edge of the grid container
center
align-content:center The aligns the grid in the center of the grid container
Stretch
align-content:stretch This is the default property. The resizes the grid items to allow the grid to fill the full height of the grid container
Space-around
align-content:space-around The place an even amount of space between each grid item, with half-sized spaces on the far ends.
Space-between
align-content:space-between The place an even amount of space between each grid item, with no space at the far ends.
Space-evenly
align-content:space-evenly The place an even amount of space between each grid item, including the far ends.
Place-content
This is shorthand property of align-content and justify-content
Grid-auto-flow
row
This is a default value, the auto-placement algorithm to fill in each row in turn, adding new rows as necessary.
column
The auto-placement algorithm to fill in each column in turn, adding new columns as necessary.
dense
The auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later.
Grid Items
grid-column
This is shorthand property of grid- column-start and grid-column- end.
grid-row
This is shorthand property of grid- row-start and grid-row- end.
grid-area
This is shorthand property of grid- column-start and grid-column- end, grid- row-start and grid-row- end.
Justify-self
Aligns a grid item inside a cell along the inline (row) axis.
Start
This aligns the grid item to be flush with the start edge of the cell
End
The aligns the grid item to be flush with the end edge of the cell
Center
aligns the grid item in the center of the cell
Stretch
This is the default value, fills the whole width of the cell
Align-self
Aligns a grid item inside a cell along the block (column) axis.
Start
Aligns the grid item to be flush with the start edge of the cell
End
Aligns the grid item to be flush with the end edge of the cell
Center
Aligns the grid item in the center of the cell
Stretch
This is the default value, fills the whole height of the cell
Place-self
This is a shorthand property of Align-self and Justify-self
