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-template-columns: auto auto;"> <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: auto auto auto;"> <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,auto);"> <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: 1em 2em 3em 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: 3em 6em 8em; grid-template-rows: 1em 2em 3em; grid-gap:1em;"> <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">111</div> <div style="background-color:#8f8">222</div> <div style="background-color:#f8f">333</div> </div>
<div style="display:grid; grid-gap:1em; grid-template: 'A B B Z' 'C C C Z' 'X X Y Z' 'X X Y Z'; "> <div style="background-color:#ff8; grid-area:A;">AAA</div> <div style="background-color:#8f8; grid-area:B;">BBB</div> <div style="background-color:#f8f; grid-area:C;">CCC</div> <div style="background-color:#ff8; grid-area:X;">XXX</div> <div style="background-color:#8f8; grid-area:Y;">YYY</div> <div style="background-color:#f8f; grid-area:Z;">ZZZ</div> </div>