Chapter 06, Learn how to improve the HTML layout using CSS styles
Do you want to learn how to elegantly layout elements on a web page? In this chapter we will learn different ways to manipulate grids and the items inside in order to produce interesting layouts.
CSS Block Level Grid
<![CDATA[
#grid-container {
display: block;
}
]]>
CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a block-level grid container use display: grid property/value.
The nested elements inside this element are called grid items.
CSS Inline Level Grid
<![CDATA[
#grid-container {
display: inline-grid;
}
]]>
CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a inline-level grid container use display: inline-grid property/value. The nested elements inside this element are called grid items.
The difference between the values inline-grid and grid is that the inline-grid will make the element inline while grid will make it a block-level element.
Grid Template Columns
<![CDATA[
#grid-container {
display: grid;
width: 200px;
grid-template-columns: 30px 30% 70%;
}
]]>
To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels(px) or percentages(%).
fr Relative Unit
<![CDATA[
.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 70px 1fr;
}
]]>
The CSS grid relative sizing unit fr is used to split rows and/or columns into proportional distances. Each fr unit is a fraction of the grid’s overall length and width. If a fixed unit is used with along with fr (like pixels for example), then the fr units will only be proportional to the distance left over.
In the above example, the second column take 70px of the avaiable 100px so the first and third columns split the remaining available 30px into two parts (`1fr` = 50% or 15px)
minimax() Function
<![CDATA[
.grid {
display: grid;
grid-template-columns: 100px minmax(200px, 600px) 100px;
}
]]>
The CSS Grid minimax() function accepts two parameters. The first parameter is the minimum size of a row or column and the second parameter is the maximum size.
The grid must have a variable width for the minimax() function.
If the maximum value is less than the minimum, then the maximum value is ignored and only the minimum value is used.
The function can be used in the values of the grid-template-rows, grid-template-columns and grid-template properties.
In the above example, the second column will vary in size between 200px and 600px depending on the size of the browser.
CSS grid-row-gap
<![CDATA[
grid-row-gap: length;
]]>
The CSS grid-row-gap property determines the amount of blank space between each row in a CSS grid layout or in other words, sets the size of the gap (gutter) between an element’s grid rows. The grid-column-gap provides the same functionality for space between grid columns.
The length value can be in (px) or in (%). The default value is Zero
Grid Gap
<![CDATA[
#grid-container {
display: grid;
grid-gap: 25px 15px;
}
]]>
The CSS grid-gap property is a shorthand way of setting the two properties grid-row-gap and grid-column-gap. It is used to determine the size of the gap between each row and each column. The first value sets the size of the gap between rows and while the second value sets the size of the gap between columns.
In the above example, the distance between rows is 25px and the distance between columns is 15px.
grid-row-start and grid-row-end
<![CDATA[
grid-row-start: 2;
grid-row-end: span 2;
]]>
The CSS grid-row-start and grid-row-end properties allow single grid items to take up multiple rows. The grid-row-start property defines on which row-line the item will start. The grid-row-end property defines how many rows an item will span, or on which row-line the item will end. The keyword span can be used with either property to automatically calculate the ending value from the starting value or vice versa. There are complementary grid-column-start and grid-column-end properties that apply the same behavior to columns.
grid-row-start values are: auto|row-line
grid-row-end values are: auto|row-line|span n
CSS grid-row
<![CDATA[
.item {
grid-row: 1 / span 2;
}
]]>
The CSS grid-row property is shorthand for the grid-row-start and grid-row-end properties specifying a grid item’s size and location within the grid row. The starting and ending row values are separated by a /. There is a corresponding grid-column property shorthand that implements the same behavior for columns.
CSS grid-template-areas
<![CDATA[
.item {
grid-area: nav;
}
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
'nav nav . .';
}
]]>
The CSS grid-template-areas property allows the naming of sections of a webpage to use as values in the grid-row-start, grid-row-end, grid-column-start, grid-column-end, and grid-area properties. They specify named grid areas within a CSS grid.
Justify Items
<![CDATA[
#container {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
}
]]>
The justify-items property is used on a grid container. It’s used to determine how the grid items are spread out along a row by setting the default justify-self property for all child boxes.
The value start aligns grid items to the left side of the grid area.
The value end aligns grid items to the right side of the grid area.
The value center aligns grid items to the center of the grid area.
The value stretch stretches all items to fill the grid area.
Align Items
<![CDATA[
#container {
display: grid;
align-items: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
]]>
The align-items property is used on a grid container. It’s used to determine how the grid items are spread out along the column by setting the default align-self property for all child grid items.
The value start aligns grid items to the top side of the grid area.
The value end aligns grid items to the bottom side of the grid area.
The value center aligns grid items to the center of the grid area.
The value stretch stretches all items to fill the grid area.
Justify Self
<![CDATA[
#grid-container {
display: grid;
justify-items: start;
}
.grid-items {
justify-self: end;
}
]]>
The CSS justify-self property is used to set how an individual grid item positions itself along the row or inline axis. By default grid items inherit the value of the justify-items property on the container. So if the justify-self value is set, it would over-ride the inherited justify-items value.
The value start positions grid items on the left side of the grid area.
The value end positions the grid items on the right side of the grid area.
The value center positions grid items on the center of the grid area.
The value stretch positions grid items to fill the grid area (default).
CSS grid-auto-flow
The CSS grid-auto-flow property specifies whether implicity-added elements should be added as rows or columns within a grid or, in other words, it controls how auto-placed items get inserted in the grid and this property is declared on the grid container.
The value row specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default).
The value column specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements.
The value dense invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added.
grid-auto-flow values are: row|column|dense|row dense|column dense;
MS Access
1109
C++
1222
HTML
584
JavaScript
616
Vbscript
873
Oracle
473
VC++
875
SQL
2959
XML
514
Java
814
Perl
455
Linux
451
