CSS GRID
- Display
Setting display property to grid allows the use of all the other properties associated with CSS Grid.
In CSS Grid, the parent element is referred to as the container and its children are called items.
display:grid;
- Grid-template-column and grid-template-row (%, fr, auto, px, em)
grid-template-columns and grid-template-rows properties (define the structure of the grid) are used to add columns and rows to grid respectively. The number of parameters given to these properties indicate the number of columns or rows in the grid, and the value of each parameter indicates the width of each column or row.
- grid-column-gap and grid-row-gap
Add spaces in between columns and rows using grid-column-gap and grid-row-gap properties respectively.
Example:
grid-column-gap: 20px;
- Grid-gap
grid-gap(shorthand property for grid-row-gap and grid-column-gap)with one value will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
Example:
grip-gap: 10px 20px;
- Justify-self and Align-self (start, center, end)
Content’s position within its cell (the box that has the content of each item) can be aligned horizontally using the justify-self property on a grid item. By default, this property has a value of stretch, which will make the content fill the whole width of the cell.
Unlike justify-self aligning individual item horizontally, align-self property (accepts all of the same values as justify-self)is used to align item vertically.
- Justify-items and align-items
Using justify-itemson your grid container allows all the items in your CSS Grid to share the same horizontal alignment while align-items property on will set the vertical alignment for all the items.
- Grid-template-areas
using grid-template-areas on the container group cells of your grid together into an area and give the area a custom name.
Every word in the code represents a cell and every pair of quotation marks represent a row.An empty cell in the grid is designated a period (.) .
Example:
grid-template-areas:
“header . content”
The words ‘header’ and ‘content’ represent cells, and the period (.) represent an empty cell in the grid.
- Grid-area Property
grid-area property (after area template for your grid container has been created) is used to place items in a custom area by referencing the name given to it.
Example:
grid-area:content;
NB: If a grid doesn’t have an area template to reference, create an area for an item to be placed using the line numbers to define where the area for this item will be.
Example:
grid-area:2/2/3/4
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
- Repeat function
grid-template-columns and grid-template-rows are used to define the structure of a grid with values for each row or column to be created.
In a case of creating a lot of rows and columns, repeat function can be used to specify the number of times a column or row should be repeated, followed by a comma and the value to be repeated.
Example:
grid-template-row: repeat (20, 30px);
This will create 20 rows of the same size of 30px.
NB: Also, repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure.
grid-template-column: repeat(2, 2fr 20px) 50px;
This represents grid-template-column: 2fr 20px 2fr 20px 50px;
- Minmax function
Minmax is used to limit the size of items when the grid container changes size by specifying the acceptable size range for your item.
Example:
grid-template-columns: 50px minmax(20px, 80px);
This represents two columns should be created.The first column is 50px wide, and the second has the minimum width of 20px and the maximum width of 80px.
- Auto-fill and Auto-fit
The repeat function comes with an option called auto-fill which allows one to automatically insert as many rows or columns of desired sizes as possible depending on the size of the container. A flexible layouts can be created by combining auto-fill with minmax.
Example:
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
This will keep inserting 50px columns (when the container changes size) and stretching them until it can insert another one.
Auto-fit is almost like auto-fill but collapses empty rows/columns and stretches items to fit container size (when it’s size exceeds the size of all the items combined) unlike auto-fill that keeps adding empty rows/columns and pushes items to the side.
NB:If your container can’t fit all items on one row, it will move them down to a new one.
