CSS grid-area Property

February 10, 2021 12:37 pm IST

You are Here:

CSS grid-area Property

CSS grid-area property is a shorthand property of the following CSS properties

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerdiv{ display: grid; grid: 90px/ auto auto auto; border: 1px solid black; } #outerDiv div{ border: 1px solid #00f; background-color: rgba(0,0,255,.2); padding: 25px; margin: 8px; text-align: center; } #outerDiv div:nth-child(1){ grid-area: 1/ 1/ span 2/ span 2; } </style> </head> <body> <h1>CSS grid-area 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> </body> </html>

Run

Syntax

Using CSS

element{ grid-area: 2 / 2 / span 2 / span 2; }

Using Javascript

object.style.gridArea="2 / 2 / span 2 / span 2";

Animatable

Yes, grid-area property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS grid-area property is auto / auto / auto / auto.

Property Value

The following table provides a list of values for CSS grid-area property.

Value	Explanation
grid-row-start	Specifies on which row-line the item will start.
grid-column-start	Specifies on which column-line the item will start.
grid-row-end	Specifies on which row-line the item will end.
grid-column-end	Specifies on which column-line the item will end.

Using JavaScript

In the following example, we will demonstrate how to change the CSS grid-area property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerdiv{ display: grid; grid: 90px/ auto auto auto; border: 1px solid black; } #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-area 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.gridArea = "2/ 1/ span 2/ span 2"; } </script> </body> </html>

Run