display:grid 时 , grid-auto-flow:row可以用align-content , grid-auto-flow:column可以用justify-content

display:grid 时 , grid-auto-flow:row可以用align-content , grid-auto-flow:column可以用justify-content

align-content和justify-content既能用于flex,也能用于grid

display:grid; grid-auto-flow:row; 时 align-content的效果

代码:

<section><fieldset><legend></legend><div style="display: grid; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(106, 180, 200);">div</div><section style="background-color: rgb(15, 249, 114);">secction</section><article style="background-color: rgb(220, 238, 23);">article</article><label style="background-color: rgb(155, 31, 98);">label</label><span style="background-color: rgb(88, 45, 132);">span</span></div></fieldset><fieldset><legend>space-between</legend><div style="display: grid; align-content: space-between; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(212, 108, 186);">div</div><section style="background-color: rgb(239, 149, 244);">secction</section><article style="background-color: rgb(81, 102, 68);">article</article><label style="background-color: rgb(177, 233, 210);">label</label><span style="background-color: rgb(152, 110, 13);">span</span></div></fieldset><fieldset><legend>space-around</legend><div style="display: grid; align-content: space-around; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(250, 117, 191);">div</div><section style="background-color: rgb(118, 33, 236);">secction</section><article style="background-color: rgb(252, 232, 121);">article</article><label style="background-color: rgb(240, 80, 59);">label</label><span style="background-color: rgb(109, 89, 252);">span</span></div></fieldset><fieldset><legend>space-evenly</legend><div style="display: grid; align-content: space-evenly; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(191, 14, 234);">div</div><section style="background-color: rgb(4, 191, 204);">secction</section><article style="background-color: rgb(65, 209, 55);">article</article><label style="background-color: rgb(44, 32, 68);">label</label><span style="background-color: rgb(74, 13, 158);">span</span></div></fieldset><fieldset><legend>stretch</legend><div style="display: grid; align-content: stretch; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(112, 232, 28);">div</div><section style="background-color: rgb(61, 207, 213);">secction</section><article style="background-color: rgb(201, 5, 31);">article</article><label style="background-color: rgb(80, 121, 66);">label</label><span style="background-color: rgb(18, 69, 230);">span</span></div></fieldset><fieldset><legend>start</legend><div style="display: grid; align-content: start; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(155, 68, 233);">div</div><section style="background-color: rgb(195, 186, 120);">secction</section><article style="background-color: rgb(42, 81, 254);">article</article><label style="background-color: rgb(83, 107, 63);">label</label><span style="background-color: rgb(145, 183, 232);">span</span></div></fieldset><fieldset><legend>center</legend><div style="display: grid; align-content: center; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(193, 108, 158);">div</div><section style="background-color: rgb(196, 147, 155);">secction</section><article style="background-color: rgb(69, 201, 237);">article</article><label style="background-color: rgb(251, 147, 181);">label</label><span style="background-color: rgb(242, 28, 56);">span</span></div></fieldset><fieldset><legend>end</legend><div style="display: grid; align-content: end; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(238, 81, 158);">div</div><section style="background-color: rgb(124, 19, 102);">secction</section><article style="background-color: rgb(203, 140, 243);">article</article><label style="background-color: rgb(252, 98, 239);">label</label><span style="background-color: rgb(89, 183, 233);">span</span></div></fieldset></section>

<section><fieldset><legend></legend><div style=“display: grid; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(106, 180, 200);”>div</div><section style=“background-color: rgb(15, 249, 114);”>secction</section><article style=“background-color: rgb(220, 238, 23);”>article</article><label style=“background-color: rgb(155, 31, 98);”>label</label><span style=“background-color: rgb(88, 45, 132);”>span</span></div></fieldset><fieldset><legend>space-between</legend><div style=“display: grid; align-content: space-between; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(212, 108, 186);”>div</div><section style=“background-color: rgb(239, 149, 244);”>secction</section><article style=“background-color: rgb(81, 102, 68);”>article</article><label style=“background-color: rgb(177, 233, 210);”>label</label><span style=“background-color: rgb(152, 110, 13);”>span</span></div></fieldset><fieldset><legend>space-around</legend><div style=“display: grid; align-content: space-around; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(250, 117, 191);”>div</div><section style=“background-color: rgb(118, 33, 236);”>secction</section><article style=“background-color: rgb(252, 232, 121);”>article</article><label style=“background-color: rgb(240, 80, 59);”>label</label><span style=“background-color: rgb(109, 89, 252);”>span</span></div></fieldset><fieldset><legend>space-evenly</legend><div style=“display: grid; align-content: space-evenly; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(191, 14, 234);”>div</div><section style=“background-color: rgb(4, 191, 204);”>secction</section><article style=“background-color: rgb(65, 209, 55);”>article</article><label style=“background-color: rgb(44, 32, 68);”>label</label><span style=“background-color: rgb(74, 13, 158);”>span</span></div></fieldset><fieldset><legend>stretch</legend><div style=“display: grid; align-content: stretch; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(112, 232, 28);”>div</div><section style=“background-color: rgb(61, 207, 213);”>secction</section><article style=“background-color: rgb(201, 5, 31);”>article</article><label style=“background-color: rgb(80, 121, 66);”>label</label><span style=“background-color: rgb(18, 69, 230);”>span</span></div></fieldset><fieldset><legend>start</legend><div style=“display: grid; align-content: start; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(155, 68, 233);”>div</div><section style=“background-color: rgb(195, 186, 120);”>secction</section><article style=“background-color: rgb(42, 81, 254);”>article</article><label style=“background-color: rgb(83, 107, 63);”>label</label><span style=“background-color: rgb(145, 183, 232);”>span</span></div></fieldset><fieldset><legend>center</legend><div style=“display: grid; align-content: center; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(193, 108, 158);”>div</div><section style=“background-color: rgb(196, 147, 155);”>secction</section><article style=“background-color: rgb(69, 201, 237);”>article</article><label style=“background-color: rgb(251, 147, 181);”>label</label><span style=“background-color: rgb(242, 28, 56);”>span</span></div></fieldset><fieldset><legend>end</legend><div style=“display: grid; align-content: end; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(238, 81, 158);”>div</div><section style=“background-color: rgb(124, 19, 102);”>secction</section><article style=“background-color: rgb(203, 140, 243);”>article</article><label style=“background-color: rgb(252, 98, 239);”>label</label><span style=“background-color: rgb(89, 183, 233);”>span</span></div></fieldset></section>

display:grid; grid-auto-flow:column; 时, justify-content 的效果 221028

看来 grid 完全可以 替代 flex

<section><fieldset><legend></legend><div style="display: grid; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(76, 32, 171);">div</div><section style="background-color: rgb(192, 176, 32);">secction</section><article style="background-color: rgb(23, 244, 26);">article</article><label style="background-color: rgb(61, 64, 212);">label</label><span style="background-color: rgb(7, 204, 88);">span</span></div></fieldset><fieldset><legend>space-between</legend><div style="display: grid; justify-content: space-between; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(60, 241, 255);">div</div><section style="background-color: rgb(196, 91, 143);">secction</section><article style="background-color: rgb(57, 183, 242);">article</article><label style="background-color: rgb(193, 14, 138);">label</label><span style="background-color: rgb(77, 94, 87);">span</span></div></fieldset><fieldset><legend>space-around</legend><div style="display: grid; justify-content: space-around; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(214, 51, 104);">div</div><section style="background-color: rgb(168, 125, 123);">secction</section><article style="background-color: rgb(245, 145, 121);">article</article><label style="background-color: rgb(185, 96, 116);">label</label><span style="background-color: rgb(68, 61, 40);">span</span></div></fieldset><fieldset><legend>space-evenly</legend><div style="display: grid; justify-content: space-evenly; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(253, 188, 168);">div</div><section style="background-color: rgb(8, 110, 88);">secction</section><article style="background-color: rgb(156, 132, 131);">article</article><label style="background-color: rgb(232, 18, 14);">label</label><span style="background-color: rgb(53, 62, 154);">span</span></div></fieldset><fieldset><legend>stretch</legend><div style="display: grid; justify-content: stretch; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(37, 106, 228);">div</div><section style="background-color: rgb(10, 86, 57);">secction</section><article style="background-color: rgb(42, 194, 114);">article</article><label style="background-color: rgb(200, 112, 195);">label</label><span style="background-color: rgb(220, 115, 37);">span</span></div></fieldset><fieldset><legend>start</legend><div style="display: grid; justify-content: start; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(31, 141, 188);">div</div><section style="background-color: rgb(249, 65, 184);">secction</section><article style="background-color: rgb(20, 233, 169);">article</article><label style="background-color: rgb(128, 144, 167);">label</label><span style="background-color: rgb(95, 90, 158);">span</span></div></fieldset><fieldset><legend>center</legend><div style="display: grid; justify-content: center; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(61, 49, 145);">div</div><section style="background-color: rgb(63, 32, 79);">secction</section><article style="background-color: rgb(85, 175, 212);">article</article><label style="background-color: rgb(242, 157, 3);">label</label><span style="background-color: rgb(66, 225, 204);">span</span></div></fieldset><fieldset><legend>end</legend><div style="display: grid; justify-content: end; border: 1px solid black; grid-auto-flow: column;"><div style="background-color: rgb(237, 145, 152);">div</div><section style="background-color: rgb(245, 84, 110);">secction</section><article style="background-color: rgb(82, 26, 109);">article</article><label style="background-color: rgb(157, 79, 185);">label</label><span style="background-color: rgb(212, 163, 173);">span</span></div></fieldset></section>

<section><fieldset><legend></legend><div style=“display: grid; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(76, 32, 171);”>div</div><section style=“background-color: rgb(192, 176, 32);”>secction</section><article style=“background-color: rgb(23, 244, 26);”>article</article><label style=“background-color: rgb(61, 64, 212);”>label</label><span style=“background-color: rgb(7, 204, 88);”>span</span></div></fieldset><fieldset><legend>space-between</legend><div style=“display: grid; justify-content: space-between; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(60, 241, 255);”>div</div><section style=“background-color: rgb(196, 91, 143);”>secction</section><article style=“background-color: rgb(57, 183, 242);”>article</article><label style=“background-color: rgb(193, 14, 138);”>label</label><span style=“background-color: rgb(77, 94, 87);”>span</span></div></fieldset><fieldset><legend>space-around</legend><div style=“display: grid; justify-content: space-around; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(214, 51, 104);”>div</div><section style=“background-color: rgb(168, 125, 123);”>secction</section><article style=“background-color: rgb(245, 145, 121);”>article</article><label style=“background-color: rgb(185, 96, 116);”>label</label><span style=“background-color: rgb(68, 61, 40);”>span</span></div></fieldset><fieldset><legend>space-evenly</legend><div style=“display: grid; justify-content: space-evenly; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(253, 188, 168);”>div</div><section style=“background-color: rgb(8, 110, 88);”>secction</section><article style=“background-color: rgb(156, 132, 131);”>article</article><label style=“background-color: rgb(232, 18, 14);”>label</label><span style=“background-color: rgb(53, 62, 154);”>span</span></div></fieldset><fieldset><legend>stretch</legend><div style=“display: grid; justify-content: stretch; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(37, 106, 228);”>div</div><section style=“background-color: rgb(10, 86, 57);”>secction</section><article style=“background-color: rgb(42, 194, 114);”>article</article><label style=“background-color: rgb(200, 112, 195);”>label</label><span style=“background-color: rgb(220, 115, 37);”>span</span></div></fieldset><fieldset><legend>start</legend><div style=“display: grid; justify-content: start; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(31, 141, 188);”>div</div><section style=“background-color: rgb(249, 65, 184);”>secction</section><article style=“background-color: rgb(20, 233, 169);”>article</article><label style=“background-color: rgb(128, 144, 167);”>label</label><span style=“background-color: rgb(95, 90, 158);”>span</span></div></fieldset><fieldset><legend>center</legend><div style=“display: grid; justify-content: center; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(61, 49, 145);”>div</div><section style=“background-color: rgb(63, 32, 79);”>secction</section><article style=“background-color: rgb(85, 175, 212);”>article</article><label style=“background-color: rgb(242, 157, 3);”>label</label><span style=“background-color: rgb(66, 225, 204);”>span</span></div></fieldset><fieldset><legend>end</legend><div style=“display: grid; justify-content: end; border: 1px solid black; grid-auto-flow: column;”><div style=“background-color: rgb(237, 145, 152);”>div</div><section style=“background-color: rgb(245, 84, 110);”>secction</section><article style=“background-color: rgb(82, 26, 109);”>article</article><label style=“background-color: rgb(157, 79, 185);”>label</label><span style=“background-color: rgb(212, 163, 173);”>span</span></div></fieldset></section>