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