1. display:grid, display: inline-grid
.grid {
display: grid;
}
A) display: grid Sets up the possibility of a grid layout (if the element has children).
As long as no explict width is put on the element "grid" is applied to, the element (and any child elements within it) will stretch to the width of any container it may be in. This is true even if the element "grid" is applied to (or child element within it) is an inline element. Another way of saying this is that all content is put into rows--columns have not yet been created
If an explict "width" is applied to the grid element (whether that element is an inline or block element) the width of the grid element will be determined by that declared width, becoming smaller or larger than its parent, depending on the width element (vertical scroll bars will be created on content wider than the screen unless "overflow: hidden" is set on the parent). Note that the width cannot be smaller than the largest peice of unbreakable content (such as the longest word or any child-element that has a declared width greater than the width you are trying to assign to the grid parent element).
The same rules that apply to width also apply to any explicit heights added to the grid container, although grid items do not automatically stetch to fill all the available height of their parents. Parent heights have no effect on the height of the grid that may be a child of that element: even if overflow: hidden is set on the parent, all the height needed to display the grid element will be used.
Note that any attempt to define a grid element as "display: inline-block" negates the grid display property and since there are no "natural" inline-block elements, the point is moot.
B) display: inline-grid also sets up the possibility of a grid layout (if the element has children).
.grid {
display: inline-grid;
}
As long as no explict width is put on the element "inline-grid", that element (or its children) will be only as wide as the largest, unbreakable child-element within it (such as the longest word or any child element with an explicit width that is larger than the width you are attempting to put on the "inline-grid" element.). This is true whether the element "inline-grid" is a block or inline element. All the other rules from "display:grid" still apply
NOTE THAT ALL GRID STYLES GO ON THE PARENT, NOT THE CHILDREN2. Putting margins around grid children with "grid-column-gap, "grid-row-gap" or "grid-gap"
eg:.grid {
grid-column-gap: 20px;
}
.grid {
grid-row-gap: 20px;
}
.grid {
.grid-gap: 20px
}
Since columns have not been defined at this point, there is no column gap. Gap occurs AFTER the child and NO gap is put on the LAST child. "grid-gap" puts a gap both on coluns and rows: if the gap is the same for both columns and rows, use one value e.g. 20px. If the gap on rows or columns is different use two values e.g. 20px 30px. The first of these two values refers to the gap under rows, the other to the gap beside and to the right of columns. Note: gap does NOT show up in dev tools (like margin or padding would).
3. Defining row heights and column widths with "grid-template-rows", "grid-template-columns" and "grid-auto-rows" and "grid-auto-columns"
NOTE THAT "grid-template-rows" and "grid-template-columns" CAN BE COMBINED IN THE SAME CSS DECLARATION SO THAT ROW HIEGHTS AND COLUMN WIDTHS CAN BE DEFINED ALL AT ONCE. THE SAME IS TRUE OF "grid-auto-rows" and "grid-auto-columns" NOTE: "grid-template-rows" DOES NOT TAKE PERCENTAGE VALUE, FR VALUES (see below) OR VH OR VW VALUES UNLESS A HEIGHT IS SET ON THE "display: grid" ELEMENT. PIXEL VALUES WILL WORK WITHOUT A HEIGHT BEING SET.A) Setting row heights with "grid-template-rows" eg:.
.grid {
grid-template-rows
200px 100px 400px;
}
adding more pixel values here (separated by spaces) will give heights to more columns. "200px" effects the first row's height, "100px the second row's height and so on. To make ALL rows a specified height, see "grid-auto-rows" below.
B) Setting column widths with "grid-template-columns" eg:.
.grid {
grid-template-columns
400px 100px 300px;
}
adding more pixel values here (separated by spaces) will give widths to more columns (i.e. put more columns on the same row, without wraping, going off the screen the the right with scroll bar if necessary) So, "400px" effects the first columns's height, "100px the second columns's width and so on. To make ALL columns a specified width, see "grid-auto-columns" below.
Instead of pixel values, percentage columns can also be set up by substituting "400px 100px 300px" for, say, 33% 33% 33%. Percentage values that add up to more than 100% will push content off the screen to the right and create a vertical scrollbar (unless overflow:hidden was applied on the parent)."grid-template-columns" acts considerably differently than "grid-template-rows" (above):
C) Defining row heights and column widths with "grid-auto-rows", "grid-auto-columns"
NOTE: BOTH "grid-auto-rows" and "grid-auto-columns" WILL BE OVERIDDEN IF "grid-template-rows" or "grid-template-columns" HAS BEEN SET ON THE SAME ELEMENT, NO MATTER WHAT ORDER THEY OCCUR IN THE CASCADE.
"grid-auto-rows" sets ALL the children inside a "display: grid" element (THAT ARE NOT ALREADY SET WITH "grid-template-columns")to the values specified.
.grid {
grid-auto-rows
200px;
}
We can also set different heights on rows using multiple values. This effects ALL children by setting the first child to 200px high, the second to 400px high and the third to 40px high. Then, on the fourth element, the is repeated: the fourth element is 200px high and the fifth 400px high and so on until all children receive a height. Units may be mixed (e.g. percentages may be used in place of pixels )
.grid {
grid-auto-rows
200px 400px 40px;
}
"grid-auto-columns" sets all the children inside a "display: grid" element to that width THAT ARE NOT ALREADY SET WITH "grid-template-columns".
.grid {
grid-auto-columns {
33%; }
We CANNOT set different widths on columns using multiple values because the first value always effects the entire column.
.grid {
grid-auto-rows
200px 400px 40px;
}
4. Creating a flexible grid with the fraction-of-available-space unit "fr"
The important thing to note about the fraction-of-availble-space unit is "available space". Other than that it works just like percentage value. If we set 3 children inside a grid to be "33% 33% 33%" then each child will, of course, be 33% of the screen wide. This could be accomplished in exactly the same way with "fr" units by setting them to be "1fr 1fr 1fr" --the availalbe space will be divided into 3 equally spaced elements that get smaller as the screen does and do not wrap. However, if we mix units, such as in "1fr 1fr 40px 20%" then we have the last element taking up 20% of the screen, the second last taking up 40px of the screen and the first two "fr" elements taking 2 equal parts of the AVAILABLE space leftover AFTER the other two elements have used up 20% and 40px of the screen respectively. "2fr 2fr", or any value that is the same "xfr xfr" is equivalent to "1fr 1fr". It is only when we change at least one of the "fr" values that a different proportion of avaialbe space is used. e.g. "1fr 2fr 3fr" would first divided availble screen size into 3 parts but make the third part 3 times as big as the first and the second twice as big as the first. NOTE: "grid-template-rows" DOES NOT TAKE PERCENTAGE VALUE, FR VALUES (see below) OR VH OR VW VALUES UNLESS A HEIGHT IS SET ON THE "display: grid" ELEMENT. PIXEL VALUES WILL WORK WITHOUT A HEIGHT BEING SET. It is not liklley that we would want to set a height on the parent, but you could if you wanted % fr values to work.
.grid {
grid-template-rows
1fr 20% 400px;
}
.grid grid-template-columnsFR{
grid-template-columns
1fr 20% 400px;
}