Loading Please Wait...
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
The grid layout is basically a grid container with grid children (items) of rows and columns. Grid model provides various properties to layout Grid items.
The CSS display: grid; or display: inline-grid; property defines a grid container.
.grid-container{
display: grid | inline-grid;
}
The CSS grid-template-columns property defines a grid column.
.grid-container{
grid-template-columns: 30px 50px;
grid-template-columns: minmax(10px, 1fr) 3fr;
grid-template-columns: repeat(5, 1fr);
grid-template-columns: 50px auto 100px 1fr;
}
The CSS grid-template-rows property defines a grid column.
.grid-container{
grid-template-rows: 30px 50px;
grid-template-rows: minmax(10px, 1fr) 3fr;
grid-template-rows: repeat(5, 1fr);
grid-template-rows: 50px auto 100px 1fr;
}
The CSS grid-template-area property specifies how to display columns and rows, using named grid items.
.grid-container{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"header header"
"sidebar ."
"footer footer";
}
The CSS grid-template-area is a shorthand property for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.
/* grid-template-rows grid-template-area / grid-template-columns */
.grid-container{
[row1-start] "header header" 1fr [row1-end]
[row2-start] "sidebar." 1fr [row2-end]
[row3-start] "footer footer" 1fr [row3-end]
/ repeat(3, 1fr);
}
The CSS grid-column-gap or column-gap properties is used to define gap between columns.
The CSS grid-row-gap or row-gap properties is used to define gap between rows.
The CSS grid-gap or gap properties is used to define gap between rows and columns.
.grid-container{
/* Standard */
column-gap: 10px;
row-gap: 10px;
gap: 10px 10px; /* row-gap column-gap */
/* Old (Deprecated) */
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-gap: 10px 10px; /* row-gap column-gap */
}
The CSS justify-items property aligns grid items along the inline (row) axis inside cell.
.grid-container{
justify-items: start | end | center | stretch;
}
The CSS align-items property aligns grid items along the block (column) axis inside cell.
.grid-container{
align-items: start | end | center | stretch | baseline;
}
The place-items is a shorthand property to set both justify-items and align-items.
.grid-container{
place-items: start center; /* align-items justify-items */
place-items: start; /* both */
}
The justify-content property align the entire grid (table, row, column) inside grid container horizontally.
.grid-container{
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
The align-content property align the entire grid (table, row, column) inside grid container vertically.
.grid-container{
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
The place-content is a shorthand property to set both align-content and justify-content.
.grid-container{
place-content: start end;
place-content: start;
}
Specify the location of the item inside grid.
The grid-column-start property specify the starting location.
The grid-column-end property specify the ending location.
The grid-column property specify the starting and ending location (start/end).
line number or name value: number or name of grid line.
span number or name value: span to the number or name of grid line.
auto value: indicates auto-placement, an automatic span, or a default span of one.
.grid-item{
grid-column-start: 2;
grid-column-end: five;
grid-column-start: row1-start;
grid-column-end: span col4-start;
grid-column-end: span 2;
grid-column: 3 / span 2;
}
Specify the location of the item inside grid.
The grid-row-start property specify the starting location.
The grid-row-end property specify the ending location.
The grid-row property specify the starting and ending location (start/end).
.grid-item{
grid-row-start: 2;
grid-row-end: five;
grid-row-start: row1-start;
grid-row-end: span col4-start;
grid-row-end: span 2;
grid-row: 3 / span 2;
}
Gives an item a name so that it can be referenced by a template created with the grid-template-areas property.
/* name | row-start / column-start / row-end / column-end */
.grid-item{
grid-area: header;
grid-area: 1 / col4-start / last-line / 6;
}
Aligns a grid item inside a cell along the inline (row) axis.
/* name | row-start / column-start / row-end / column-end */
.grid-item{
justify-self: start | end | center | stretch;
}
Aligns a grid item inside a cell along the block (column) axis
/* name | row-start / column-start / row-end / column-end */
.grid-item{
align-self: start | end | center | stretch;
}
place-self sets both the align-self and justify-self properties in a single declaration.
/* name | row-start / column-start / row-end / column-end */
.grid-item{
place-self: center stretch;
place-self: center;
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved