WDS75 - Becoming Greedy in CSS(Part 3)

In the last article, we learned about some important terms related to CSS Grids including grid container and grid items. Now in next few articles, we are going to learn various properties of this grid elements. Let's begin...

display

It defines the element as a grid container and creates a new grid formatting for its elements.

Available values:

• grid - Creates a block-level grid
• inline-grid - Creates an inline-level grid
• subgrid - This is used to create nested grids. In this case, your grid container is itself a grid item of parent grid.

.container{
    display: grid;
}

grid-template-columnsgrid-template-rows

It defines the columns and rows of the grid with the space-separated list of values. Here values will decide the size of each row/column and space between them represent a grid line.

Available values:

•  - Indicates the length and can be in percentage, px or any other valid unit
•  - Optional name of that line

If you do not provide the names of lines CSS will automatically give them numerical names starting with 1.

.container{
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

But you can definitely give names to this lines whatever you wish...

.container{
  display: grid;
  grid-template-columns: [col1] 40px [col2] 50px [col3] auto [col4] 50px [col5] 40px [col6];
  grid-template-rows: [row1] 25% [row2] 100px [row3] auto [row4];
}

Both of the above codes will generate the following CSS Grid layout:

If you have repeating parts, instead of writing completely you can use the following syntax:

.container{
    grid-template-rows: repeat(4, 25px [row]) 5%;
}

Which is same as:

.container{
    grid-template-rows: 25px [row] 25px [row] 25px [row] 25px [row] 5%;
}

There is also something known as fr unit which allows you to divide entire space into fractions. For example, the below code will divide entire with of container into 4 equal parts:

.container{
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

Also, it is important to note that when you mention the length of some element in px, it's size will remain fix but this is not the case for fr. Say, total width is 320px and you have 3 '1fr' elements and 1 '20px' element then you will get total 4 elements with sizes 100px, 100px , 100px and 20px. If you resize it to 110px then you will get 4 elements with 30px , 30px , 30px and 20px.

That's all for today. In the next article, we will continue learning properties related to CSS grids.
Till then #keepCoding.