一个以前不知道的知识点
<style> .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 20px; } .flex { display: flex; justify-content: space-between; } section:before { content: "Before Content"; display: block; background-color: #7CCBB0; border-radius: 5px; padding: 10px; } section:after { content: "After Content"; display: block; grid-column: 2; grid-row: 1 / span 2; background-color: #7CCBB0; border-radius: 5px; padding: 10px; } </style> <h2>Grid</h2> <section class="grid"> <div class="item">item1</div> <div class="item">item2</div> </section> <h2>Flexbox</h2> <section class="flex"> <div class="item">item1</div> <div class="item">item2</div> </section>在线地址： https://codepen.io/airen/pen/qXddOZ
参考文献： https://www.w3cplus.com/css3/collection-interesting-facts-css-grid-layout.html
