HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerDiv{ display: grid; grid: 90px/ auto auto auto; border: 1px solid black; grid-row-gap: 10px; } #outerDiv div{ border: 1px solid #00f; background-color: rgba(0,0,255,.2); padding: 25px; margin: 8px; text-align: center; } </style> </head> <body> <h1>CSS grid-row-start Property</h1> <div id="outerDiv"> <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> <button onclick="myFunction()">Click Me</button> <script> var x = document.querySelector("#outerDiv div:first-child"); function myFunction(){ x.style.gridRowStart = "2"; } </script> <p><strong>Note</strong>: Click on the button to change the position of 'Div 1' from first row to second row.</p> </body> </html>
OUTPUT
×

Save as Private