grid表格
HTML
<!DOCTYPE html>
<html>
<head>
<title>网格</title>
<link rel="stylesheet" type="text/css" href="positiontest.css">
</head>
<body>
<div class="wrapper">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
</div>
<html>
<head>
<title>网格</title>
<link rel="stylesheet" type="text/css" href="positiontest.css">
</head>
<body>
<div class="wrapper">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
</div>
</body>
</html>
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
/* display: grid;
grid-template-columns: repeat(5,1fr ) ;*/
}
.one {
background: red;
grid-column: 1 / 3;
grid-row: 1;
}
.two {
background: blue;
grid-column: 2 / 4;
grid-row: 1 / 3;
background: yellow;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background-color: red;
}
.four {
grid-column: 3;
grid-row: 3;
background-color: blue;
}
.five {
grid-column: 2;
grid-row: 4;
background-color: yellow;
}
.six {
grid-column: 3;
grid-row: 4;
background-color: red;
}
grid-template-columns: repeat(5,1fr ) ;*/
}
.one {
background: red;
grid-column: 1 / 3;
grid-row: 1;
}
.two {
background: blue;
grid-column: 2 / 4;
grid-row: 1 / 3;
background: yellow;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background-color: red;
}
.four {
grid-column: 3;
grid-row: 3;
background-color: blue;
}
.five {
grid-column: 2;
grid-row: 4;
background-color: yellow;
}
.six {
grid-column: 3;
grid-row: 4;
background-color: red;
}