/* 有几个auto 就有几个值,还可以设置成px */
grid-template-columns: auto auto auto auto auto;
/*
网格之间的空隙为10px
是grid-row-gap 行空隙 和 grid-column-gap: 列空隙 的简写
*/
grid-gap: 10px;
<style type="text/css">
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
/* 有几个auto 就有几个值,还可以设置成px */
grid-gap: 10px;
/* 网格之间的空隙为10px
是grid-row-gap 行空隙 和 grid-column-gap: 列空隙 的简写
*/
background-color: darkgray;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
/*
grid-row: 1 / 4; //与下边相同, span 省略了
*/
/* grid-row-start 和grid-row-end 的简写属性 */
grid-row: 1 / span 3;
/* span 表示跨越几行 */
/*
grid-column: 1 / 3; //与下边相同, span 省略了
*/
/* grid-column-start 和 grid-column-end 的简写属性 */
grid-column: 1 / span 2;
/* span 表示跨越几列 */
<style type="text/css">
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
/* 有几个auto 就有几个值,还可以设置成px */
/*grid-template-rows: 80px 200px;*/
/* 有两行 不同的高度 */
grid-gap: 10px;
/* 网格之间的空隙为10px
是grid-row-gap 行空隙 和 grid-column-gap: 列空隙 的简写
*/
background-color: darkgray;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.item1 {
/*grid-row: 1 / 4;*/
/* grid-row-start 和grid-row-end 的简写属性 */
grid-row: 1 / span 3;
/* span 表示跨越几行 */
/*grid-column: 1 / 3;*/
/* grid-column-start 和 grid-column-end 的简写属性 */
grid-column: 1 / span 2;
/* span 表示跨越几列 */
}
</style>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
您可使用 grid-area 属性来命名网格项目。
通过在网格容器上使用 grid-template-areas属性,您可以在设置网格布局时引用该名称。
此网格布局包含六列三行:
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
<body>
<h1>grid-area 属性</h1>
<p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>
<p>通过在网格容器上使用 <em>grid-template-areas</em>属性,您可以在设置网格布局时引用该名称。</p>
<p>此网格布局包含六列三行:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
grid-area 的简写使用
grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item8 {
/*grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。*/
grid-area: 1 / 2 / 5 / 6;
/*使 "item8" 从 row-line 1 和 column-line 2 开始,在 row-line 5 和 column line 6 结束:*/
}
/*.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}*/
/*使 "item8" 从 row-line 2 和 column-line 开始,并跨越 2 行和 3 列:*/
</style>
<body>
<h1>grid-area 属性</h1>
<p>您可以使用 <em>grid-area</em> 属性来规定在何处放置项目。</p>
<p>语法是:</p>
<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>
<p>Item8 将在 row-line 1 和 column-line 2 开始,并在 row-line 5 column-line 6 结束:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
</div>
</body>
布局位置:
justify-content: center;
/*justify-content: start;
justify-content: end;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
*/
/*----------------------------------------*/
align-content: center;
/*align-content: space-around;
align-content: space-between;
align-content: space-evenly;
align-content: end;
align-content: start;*/
<style type="text/css">
.grid-container {
display: grid;
height: 400px;
border: 1px solid red;
/* 网格的总高度必须小于容器的高度,这样 align-content 属性才能生效。 */
justify-content: center;
/*justify-content: start;
justify-content: end;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
*/
/*----------------------------------------*/
align-content: center;
/*align-content: space-around;
align-content: space-between;
align-content: space-evenly;
align-content: end;
align-content: start;*/
}
.grid-container div {
border: 1px solid #331212;
}
</style>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
</body>
over!!!!!!!!!!!!!!!!!!!!