HTML and CSS Reference
In-Depth Information
Yo u t h e n d i v i d e t h i s c o n t a i n e r i n t o c o l u m n s a n d r o w s u s i n g t h e grid-columns
and grid-rows properties, like so:
body {
display: grid;
grid-columns: 30rem 40rem 30rem;
grid-rows: 1fr 1fr 1fr 1fr;
The grid-columns property specifies three columns in the grid, and they are
30 rem s wide, 40 rem s wide, and 30 rem s wide, respectively. In this case, the grid-
rows property is using a new CSS unit called fr (fraction), which means I will be
this many parts of the total big . So in this case you have four rows that are all 1fr
big for a total of 4fr . Therefore, each row spans 1/4 of the total height of the body.
Yo u c o u l d a l s o u s e p e r c e n t a g e s , o t h e r C S S l e n g t h u n i t s , o r auto to specify col-
umns, for example:
body {
display: grid;
grid-columns: 30% 40% 30%;
grid-rows: 1fr 1fr 1fr 1fr;
In this alternative version, I've changed grid-columns so that the columns are
percentages (you can see this alternative example in simple-grid2.html). Percent-
ages work the way you'd expect them to, although you need to be careful about
using weird combinations of percentages and absolute unit values: If they end
up as less than 100% in one or both dimensions, you'll waste space and produce
unexpected results. If they end up as more than 100%, your content may be cut off.
Search WWH ::

Custom Search