CSS Grid Layout
Grid or CSS Grid is a layout system which uses rows and columns to to design the web page layout, it is also called two-dimensional layout because of the usage of rows and columns together. With grid layout system it is very easy to design the web page layouts, because before grid, the float and positioning system was used to design web pages and that weren't doing a very good job because for example the aligning items together in center wasn't an easy job.
CSS Grid basics
The HTML layout used in this article.
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
</body>
- Grid Container
The parent div/element on which the display: grid property is applied is called grid container.
.parent {
display: grid;
}
- Grid Item
All the direct child divs/elements of the parent grid container are called grid items. In this case all the divs with class child are grid items.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
- Grid Gap
The space applied between grid items is called grid gap.
gap: 20px;
- Grid Rows
The grid items aligned in the horizontal way are called grid rows.
- Grid Columns
The grid items aligned in the vertical way are called grid columns.
- Grid Area
The total space composed of rows and columns is called grid area.
- Grid Lines
The dividing lines between rows and columns is called grid lines,
the lines dividing the columns are called 1. The column lines and the lines dividing the rows are called 2. The row lines.
CSS Grid properties
Now let's take a look at some widely used Grid properties.
- column gap - Specifies the gap between columns of grid.
- row gap - Specifies the gap between rows of the grid layout.
- grid-row-start - Specifies the row line of a grid item's starting position.
- grid-row-end - Specifies the on which row line the grid item will end and it also used to tell how much rows an item can span.
- grid-column-start - Specifies the position of a grid item on the column line.
- grid-column-end - Specifies the on which column line position the grid item will end and it also used to tell how much columns an item will span.
-
grid-area - This property is a shorthand for
grid-row-start,grid-row-end,grid-column-startandgrid-column-end. - grid-template-columns - This property tells that how many columns can be in the grid layout and also specifies the size of columns.
- grid-template-rows - This property tells that how many rows can be in the grid layout and also specifies the size of rows.
Conclusion
In this article we learnt about the basics of the Grid system and some or the most used grid properties. But there is a lot to learn about grid than this. Hope you liked this article helpfull.
Top comments (0)