Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 282

NOTE USING SHORTHAND

Some great shorthand is available for specifying rows and columns in a case where
you have patterns. In the example in this section, the following CSS provides the same
instructions:

#blogPage {
display: grid;
grid-columns: 15% 1fr 25%;
grid-rows: (20%)[5];
width: 90%;
height: 95%;
border: 1px dotted black;
margin: auto;
}

You have added two additional CSS properties to mainGrid . These properties are rather
self-explanatory. As their name suggests, the grid-columns property allows you to specify how
many columns are in your grid. The grid-rows property allows you to specify how many rows
are in your grid. The property values accepted are size attributes separated by spaces. The
renderer will interpret each value as a new column or row.
If you run this HTML in the browser, the output will be less than exciting. One reason is
that the div elements are empty. Go ahead and put some text in each div and examine the
output that you get in the browser. If all goes as expected, your div elements will display all
on top of each other. They are, for all intents and purposes, ignoring your previous CSS in-
structions provided to the container to layout in a four-by-two style. Well, they are not really
ignoring the instructions. Recall, the instructions were to the container mainGrid regarding
how you wanted it to lay out its child elements. You still need to give each child element its
own identity within the grid. That is, the container knows it needs to set up a four-by-two
grid, but it does not know which element goes where within that four-by-two grid. It just
floats them all on top of each other. You will now specify to the grid elements where they
should live in the relative space available within the grid. You will apply some background
colors so that the rendered page will easily demonstrate the concepts.

#mainGrid > div:nth-child(1){
grid-column: 1;
grid-row:1;
background-color: blue;
}
#mainGrid > div:nth-child(2){
grid-column:2;
grid-row:1;
background-color: aqua;
}
#mainGrid > div:nth-child(3){
grid-column: 3;
grid-row:1;
background-color: red;
}