CSS Grid Layout
Demo
This demo is an overview of most of the CSS grid properties. Learn all CSS grid property one by one displayed under 'CSS grid' heading on the left side menu.
What is grid layout?
CSS grid layout is used to divide a page into major regions (rows and colums) of our choice.
Like tables, grid layout enables an author to align elements into columns and rows. However, the grid layout provides more flexibility and control over tables.
In the following example, we will customize the grid layout to look like a webpage.
Example
CSS grid Properties (for parents)
The following table provides a list of CSS properties to control all the grid items in a grid container.
Property | Explanation |
---|---|
display | Will treat a container (<div>) as grid. |
grid-template-rows | Specifies the height of rows in a grid layout. |
grid-template-columns | Specifies the width of columns in a grid layout. |
grid-template-areas | Specifies areas within the grid layout. |
grid-template | A shorthand property for |
grid-auto-rows | Specifies a size for the rows in a grid container. |
grid-auto-columns | Specifies a size for the columns in a grid container. |
grid-auto-flow | Specifying exactly how auto-placed items get flowed into the grid. |
grid | A shorthand property for . |
grid-row-gap | Specifies the size of the gap between the rows in a grid layout. |
grid-column-gap | Specifies the size of the gap between the columns in a grid layout. |
grid-gap | Specifies the gaps (gutters) between rows and columns. |
CSS grid Properties (for children)
The following table provides a list of CSS properties to control a specific grid item in a grid container.
Property | Explanation |
---|---|
grid-row-start | Specifies on which row-line the item will start. |
grid-column-start | Specifies on which column-line the item will start. |
grid-row-end | Specifies on which row-line the item will end. |
grid-column-end | Specifies on which column-line the item will end. |
grid-row | A shorthand property for |
grid-column | A shorthand property for |
grid-area | A shorthand property for |
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.