HTML and CSS Reference
In-Depth Information
FITTING YOUR CONTENT ONTO THE GRID
Next, you need to start fitting your content onto the grid. This is done by applying
some special properties to the child elements of the container that is set to display
as a grid. In this simple example, the children look like this:
<header>
>
</header>
<div id=”block1”>Block 1</div>
<div id=”block2”>Block 2</div>
<div id=”block3”>Block 3</div>
<div id=”block4”>Block 4</div>
<footer>
>
</footer>
Yo u c a n fi fit fit h e s e e l e m e n fit s fit o fit h e g r i d y o u d e fi n e d e a r l i e r u s i n g fit h e f o l l o w i n g
properties:
grid-column
specifies the column the child element will be placed in, or
start in, in the case of children that span multiple columns.
grid-column-span
specifies the number of columns that the child element
will span (optional).
grid-row
specifies the row the child element will be placed in, or start in,
in the case of children that span multiple rows.
grid-row-span
specifies the number of rows that the child element will
span (optional).
