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.
