Grid被設計來做一些Flexbox不能做的事情，是以不是被設計來取代Flexbox的。
flexbox 一維的
Grid 二維的
總結:
Grid Items作用在Grid Container的直接子元素下
下面給出一些示例：
1.html:
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
/*
grid-column-gap: 1em;
grid-row-gap:1em;
*/
grid-gap: 1em;
.wrapper>div {
background: #eee;
padding: 1em;
.wrapper>div:nth-child(odd) {
background: #ddd;
</style>
<body>
<!-- 這個最外面包裹的是wrapper 下面有5個div:4個Lorem和1個Hello -->
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus!
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reprehenderit quae, obcaecati eveniet at accusamus rem!
Debitis autem minima eaque accusantium vitae. Ab esse distinctio laborum harum voluptas eligendi minima.
<div>Hello</div>
</body>
</html>
2.html:
<style>
.wrapper{
display: grid;
/* grid-template-columns:1fr 1fr 1fr; fr的意思是fraction，就是分數 ，x分之一*/
grid-template-columns: repeat(3,1fr);
/* grid-template-columns: repeat(4,1fr 2fr); */
grid-gap:1em;
grid-auto-rows: 100px; (注意看這個屬性)
}
.wrapper>div {
background: #eee;
padding: 1em;
.wrapper>div:nth-child(odd) {
background: #ddd;
</style>
</head>
<div class="wrapper">
<div>
Lorem ipsum dolor sit.
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cumque possimus eveniet aliquid. Impedit delectus architecto veritatis? Tempora cupiditate esse odio placeat doloribus nisi quaerat laudantium dolor, illum laborum consequuntur eaque est minus? Ex quae eius expedita dolor ab possimus.
Lorem ipsum dolor sit.
</div>
(grid-auto-rows屬性)
/* grid-template-columns:1fr 1fr 1fr; */
/* grid-auto-rows: 100px; */
//最小100px 要是多了就拉伸
grid-auto-rows:minmax(100px,auto);
(grid-auto-rows:minmax(100px,auto);屬性)
2.html完整代碼
*{
margin:0;
padding:0;
}
.nested{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows:70px;
grid-gap:1em;
.nested > div{
border: #333 1px solid;
padding: 1em;
<div>
<div class="nested">
<div>Lorem</div>
<div>
3.html:
<style>
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px ,auto);
justify-items: start;(注意看這裡)
padding: 1em;
<div class="box box1">Box 1</div>
<div class="box box2">Box 4</div>
<div class="box box3">Box 4</div>
<div class="box box4">Box 4</div>
(justify-items:center)
(justify-items:end)
(justify-items:stretch) //default
(align-items:start)
(align-items:center)
(align-items:end)
(align-items:stretch) //default
LineNumbers
grid-column:1/3;
(without)
(with)
.box1{
grid-column:1/3;
/* this means 'one' to 'three' */
.box1{
/* align-self:start; */
grid-row: 1/3;
.box2{
grid-column: 3;
grid-row: 1/3;
/* align-self: end; */
.box3{
grid-column: 2/4;
grid-row: 3;
/* justify-self: end; */
.box4{
grid-column: 1;
grid-row: 2/4;
(overlap重疊)