Grid_容器属性1

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

display 属性

display: grid指定一个容器采用网格布局

xxxxxxxxxx
<div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

xxxxxxxxxx
#container {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
}
.item {
    font-size: 35px;
    text-align: center;
    border: 1px solid #e5e4e9;
}
.item-1 {
    background-color: #ef342a;
}
.item-2 {
    background-color: #f68f26;
}
.item-3 {
    background-color: #4ba946;
}
.item-4 {
    background-color: #0376c2;
}
.item-5 {
    background-color: #c077af;
}
.item-6 {
    background-color: #f8d29d;
}
.item-7 {
    background-color: #b5a87f;
}
.item-8 {
    background-color: #d0e4a9;
}
.item-9 {
    background-color: #4dc7ec;
}

默认情况下，容器元素都是块级元素，但也可以设成行内元素

xxxxxxxxxx
#container {
    display: inline-grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
}

实时效果反馈

1.下列哪个属性可以设置容器为Grid布局：

A display:none

B display:block

C display:grid

D display:flex

答案

1=>C