<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<span>foo</span>
<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>
<span>bar</span>
<style type="text/css">
span {
font-size: 2em;
}
#container {
display: grid;/*inline-grid*/ /*垂直 水平*/
/* grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(3, 100px); repeat（重复次数,重复内容）*/
grid-template-columns: repeat(3, 50px);
grid-template-rows: 50px 50px 50px;
/* grid-template-columns: 150px 1fr 2fr; *//*fraction 1fr 2fr 后者是前者的两倍（宽度） 也可以相反*/
/*grid-template-columns:1fr 1fr minmax(100px, 1fr);*//*minmax（最小值，最大值）*/
/*grid-template-columns: 200px auto 200px;*/ /*左右固定 中间自适应*/
/* grid-template-columns: 70% 30%; */ /*两栏布局*/
/* grid-template-columns: repeat(12, 1fr); */ /*传统12栏*/
/*
grid-row-gap 属性设置行与行的间隔（行间距）
grid-column-gap 属性设置列与列的间隔（列间距）
grid-gap 属性是grid-column-gap和grid-row-gap的合并简写形式
*/
/* grid-row-gap: 20px;
grid-column-gap: 20px; */
/*grid-gap: 20px 20px;*/ /*第二个值可以忽略 同第一个值*/
/* grid-template-areas 属性 */
/* grid-auto-flow: row dense; */ /*排列 默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。 还可以设成row dense和column dense*/
/* justify-items: start | end | center | stretch;
align-items: start | end | center | stretch; */
/*
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
*/
/* place-items属性是align-items属性和justify-items属性的合并简写形式。 如果省略第二个值，则浏览器认为与第一个值相等。*/
/* justify-items: center;
align-items: center; */
/* place-items: center center */
/*
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
*/
/* place-content 属性是align-content属性和justify-content属性的合并简写形式 */
/* justify-content: center;
align-content: center;
place-content: center; */
/* grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。 */
/*
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
*/
/* grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 */
/*grid-area属性指定项目放在哪一个区域。 grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
/* justify-self 属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self 属性是align-self属性和justify-self属性的合并简写形式。*/
}
.item {
font-size: 2em;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
/* grid-column-start: 1;
grid-column-end: 3; */
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4; */
/* grid-column-start: span 2; */
}
.item-2 {
background-color: #f68f26;
/* grid-column-start: 1;
grid-column-end: 3; */
}
.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;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>
<style>
#page {
display: grid; /* 1.设置display为grid */
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot"; /* 2.区域划分 当前为 三行 两列 .表示不需要 留空 */
grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head; /* 4. 指定当前元素所在的区域位置, 从grid-template-areas选取值 */
background-color: #8ca0ff;
}
#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
#page > main {
grid-area: main;
background-color: #ffff64;
}
#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
</style>
</body>
</html>
浙公网安备 33010602011771号