<divid="t2"><div>9</div><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div></div><!-- 9 ab cd e --><styletype="text/css">#t2{display: grid;grid-template-columns:repeat(3,30px 10px);/* 设定为重复3次 30px 10px 规则 */}</style>
<divid="t3"style="width: 60px;"><div>f</div><div>g</div><div>h</div></div><!--
f g
h
--><styletype="text/css">#t3{display: grid;grid-template-columns:repeat(auto-fill,30px);}</style>
<divid="t4"><div>i</div><div>j</div><div>k</div></div><!--
i j k
--><styletype="text/css">#t4{display: grid;grid-template-columns: 1fr 2fr 3fr;}</style>
<divid="t5"><div>l</div><div>m</div><div>n</div></div><!--
l m n
--><styletype="text/css">#t5{display: grid;grid-template-columns: 30px minmax(30px,100px) 30px;}</style>
<divid="t6"><div>o</div><div>p</div><div>q</div></div><!--
o p q
--><styletype="text/css">#t6{display: grid;grid-template-columns: 10px auto 30px;}</style>
<divid="t7"><div>r</div><div>s</div><div>t</div></div><!--
r
s
t
--><styletype="text/css">#t7{display: grid;grid-template-rows: 30px 30px 30px;grid-row-gap: 10px;}</style>
<divid="t8"><div>u</div><div>v</div><div>w</div></div><!--
u v w
--><styletype="text/css">#t8{display: grid;grid-template-columns:repeat(3,30px);grid-column-gap: 10px;}</style>
<divid="t9"><div>x</div><div>y</div><div>z</div><div>A</div></div><!--
x y
z A
--><styletype="text/css">#t9{display: grid;grid-template-columns:repeat(2,30px);grid-template-rows:repeat(2,30px);grid-gap: 10px 10px;}</style>
<divid="t10"><div>B</div><div>C</div><div>D</div><div>E</div></div><!--
B C
D E
--><styletype="text/css">#t10{display: grid;grid-template-columns:repeat(2,30px);grid-template-rows:repeat(2,30px);/* 先划分出4个单元格,然后将其定名为a到d的4个区域,分别对应这4个单元格。*/grid-template-areas:'a b''c d';}</style>
<divid="t11"><div>F</div><div>G</div><div>H</div><div>I</div></div><!--
F H
G I
--><styletype="text/css">#t11{display: grid;grid-template-columns:repeat(2,30px);grid-template-rows:repeat(2,30px);grid-auto-flow: column;}</style>
justify-content属性是整个内容区域在容器里面的水平位置,也就是成员的水平分布,取值为start | end | center | stretch | space-around | space-between | space-evenly。
<divid="t15"><div>M</div><div>N</div></div><!--
M N
--><styletype="text/css">#t15{display: grid;grid-template-columns:repeat(2,30px);justify-content: space-around;}</style>
align-content属性是整个内容区域在容器里面的垂直位置,也就是成员的垂直分布,取值为start | end | center | stretch | space-around | space-between | space-evenly。
<divid="t16"style="height: 50px;"><div>O</div><div>P</div></div><!--
O P
--><styletype="text/css">#t16{display: grid;grid-template-columns:repeat(2,30px);align-content: center;}</style>
<divid="t17"style="height: 50px;"><div>Q</div><div>R</div></div><!--
Q R
--><styletype="text/css">#t17{display: grid;grid-template-columns:repeat(2,30px);place-content: center space-around;}</style>
<divclass="gridBox"><divstyle="grid-row-start: 2;">U</div></div><!--
U
--><styletype="text/css">.gridBox{display: grid;grid-template-columns:repeat(2,30px);grid-template-rows:repeat(2,30px);}</style>
justify-self属性设置单元格内容的水平位置,跟justify-items属性的用法完全一致,但只作用于单个项目,取值为start | end | center | stretch;。 align-self属性设置单元格内容的垂直位置,跟align-items属性的用法完全一致,也是只作用于单个项目,取值为start | end | center | stretch;。
stretch默认值:拉伸,占满单元格的整个宽度。
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
place-self属性是align-self属性和justify-self属性的合并简写形式。
<divclass="gridBox"><divstyle="place-self: center end;">Z</div></div><!--
Z
--><styletype="text/css">.gridBox{display: grid;grid-template-columns:repeat(2,30px);grid-template-rows:repeat(2,30px);}</style>