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

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>