Grid Examples
<div style="display:grid"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> </div>
<div style="display:grid; grid-auto-flow: column"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> </div>
<div style="display:grid; grid-template-rows: 4em"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> </div>
<div style="display:grid; grid-template-rows: 4em 6em 8em"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> </div>
<div style="display:grid; grid-template-rows: repeat(6,4em)"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> </div>
<div style="display:grid; grid-template-columns: 10em"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> </div>
<div style="display:grid; grid-template-columns: 10em 10em"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> </div>
<div style="display:grid; grid-template-columns: repeat(3,10em)"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> <div style="background-color:#ff8">123</div> <div style="background-color:#8f8">456</div> <div style="background-color:#f8f">789</div> </div>
<div style="display:grid; grid-template-columns: repeat(3,10em)"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> <div style="background-color:#ff8">123</div> <div style="background-color:#8f8">456</div> <div style="background-color:#f8f">789</div> </div>
<div style="display:grid; border: 1px dashed #888; grid-template-columns: repeat(3,10em); justify-content: space-between;"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> <div style="background-color:#ff8">123</div> <div style="background-color:#8f8">456</div> <div style="background-color:#f8f">789</div> </div>
<div style="display:grid; border: 1px dashed #888; grid-template-columns: repeat(3,10em); grid-gap: 1em 2em;"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> <div style="background-color:#ff8">123</div> <div style="background-color:#8f8">456</div> <div style="background-color:#f8f">789</div> </div>
<div style="display:grid; border: 1px dashed #888; grid-template-columns: repeat(3,10em); grid-gap: 1em; justify-content: center;"> <div style="background-color:#ff8">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> <div style="background-color:#ff8">123</div> <div style="background-color:#8f8">456</div> <div style="background-color:#f8f">789</div> </div>
<div style="display:grid; border: 1px dashed #888; grid-template-columns: repeat(3,10em); grid-gap: 1em; justify-content: center;"> <div style="background-color:#ff8; grid-column:1/3;">AAA</div> <div style="background-color:#8f8; grid-row:2/10">BBB</div> <div style="background-color:#f8f;">CCC</div> </div>
<div style="display:grid; border: 1px dashed #888; grid-template-columns: repeat(3,10em); grid-gap: 1em; justify-content: center;"> <div style="background-color:#ff8; grid-row:3">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> <div style="background-color:#ff8">123</div> <div style="background-color:#8f8">456</div> <div style="background-color:#f8f">789</div> </div>
<div style="display:grid; border: 1px dashed #888; grid-template-columns: repeat(3,10em); grid-gap: 1em; justify-content: center;"> <div style="background-color:#ff8; grid-column:3">AAA</div> <div style="background-color:#8f8">BBB</div> <div style="background-color:#f8f">CCC</div> <div style="background-color:#ff8">XXX</div> <div style="background-color:#8f8">YYY</div> <div style="background-color:#f8f">ZZZ</div> <div style="background-color:#ff8">123</div> <div style="background-color:#8f8">456</div> <div style="background-color:#f8f">789</div> </div>