HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> h2+div{ display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; grid-auto-flow:row; border: 1px solid black; } h2+div div{ border: 1px solid #00f; background-color: rgba(0,0,255,.2); padding: 25px; margin: 8px; text-align: center; } h2+div div:nth-child(3){ grid-column-end: span 2; } .point{ grid-auto-flow: row; } .point1{ grid-auto-flow: column; } .point2{ grid-auto-flow: dense; } .point3{ grid-auto-flow: row dense; } .point4{ grid-auto-flow: column dense; } </style> </head> <body> <h1>CSS grid-auto-flow Property</h1> <h2>grid-auto-flow: row;</h2> <div class="point"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> </div> <h2>grid-auto-flow: column;</h2> <div class="point1"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> </div> <h2>grid-auto-flow: dense;</h2> <div class="point2"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> </div> <h2>grid-auto-flow: row-dense;</h2> <div class="point3"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> </div> <h2>grid-auto-flow: column-dense;</h2> <div class="point4"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> </div> </body> </html>
OUTPUT
×

Save as Private