HTML and CSS Reference
In-Depth Information
FIGURE 7.16
Using CSS grids
to lay out our lovely animal
friends.
I've provided you with the columns and rows declarations free of charge:
grid-columns: 4% 20% 20% 12% 20% 20% 4%;
grid-rows: 300px 450px 450px 450px 300px;
Now you need to work out rulesets to place all the content in the places shown
on the schematic. Look at the example file if you get stuck! The final example looks
the one shown in
Figure 7.16
.
GRID PROBLEMS
IE10 is the only browser with decent support for CSS grids at the time of writing.
However, I believe it was worth talking about them, because all the browser vendors
have shown an interest in them of late.
Yo u c o u l d a l s o a r g u e t h a t t h e y a r e n o t q u i t e a s fl e x i b l e a s o t h e r l a y o u t m e t h o d s
you've seen already. One aspect of grids that surprised me is that you can only place
immediate children of the grid layout element on the grid. But I think it depends
on how you use them. For example, you could use a simple grid to place a header,
footer, and three columns easily, and then lay out the content inside them using
a different mechanism, such as Flexbox. A combination of these layout methods
would prove effective in your layout design.
