HTML and CSS Reference
In-Depth Information
Using an HTML table works and has worked for a very long time. However, best practices
today suggest separating content from layout. This is seen in many other spaces of soft-
ware development and design in the context of design patterns. In this example, the layout
is right in the HTML. You will reconstruct the page such that the content can be provided
independent of layout and all the layout will be defined in the CSS code.
The grid layout is fully defined in CSS. To create the grid, CSS properties will need to be
applied to the HTML elements. Just as with the flexbox, the grid is based on a having the
display specified for a container. You will use simple div element for your grid container.
Create the following div and apply the styles as indicated:
<style>
#mainGrid {
display: grid;
}
</style>
<div id="mainGrid">
</div>
You have designated your div with the id of mainGrid to be the container for a grid layout
by specifying its display to be grid. However, running this in the browser will not yield much
of a result. You need to define the structure of the grid. In this example, you will create a
simple four-by-two grid layout. Add the child elements to the div as shown and update the
styles as shown to supply information to the container about how you would like it to render
the child cells.
#mainGrid {
display: grid;
grid-columns: 150px 150px 150px 150px;
grid-rows: 75px 75px;
}
<div id="mainGrid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Search WWH ::




Custom Search