codescracker
css

CSS grid-area



The CSS grid-area property is used to define the location and size of a grid item in grid layout. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; grid-template-columns: auto auto auto; gap: 4px;}
      div.abc > div {border: 1px solid firebrick; padding: 10px;}
      #divOne {grid-area: 2 / 1 / span 3 / span 2;}
   </style>
</head>
<body>

   <div class="abc">
      <div id="divOne">This is France</div>
      <div>This is Canada</div>
      <div>This is United States</div>
      <div>This is Argentina</div>
      <div>This is Germany</div>
      <div>This is Italy</div>
      <div>This is Barcelona</div>
      <div>This is Austria</div>
   </div>
   
</body>
</html>
Output
This is France
This is Canada
This is United States
This is Argentina
This is Germany
This is Italy
This is Barcelona
This is Austria

In above example, consider the following CSS code:

#divOne {grid-area: 2 / 1 / span 3 / span 2;}

2 specifies the grid-row-start value, 1 specifies the grid-column-start value, span 3 specifies the number of rows to span, span 2 specifies the number of columns to span. Therefore, the div with id divOne starts from 2nd row 1st column and expands for next 3 rows and 2 columns.

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

Note - The gap property is used to define the gap between rows and columns in grid layout.

CSS gird-area Syntax

The syntax of grid-area property in CSS, is:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | gridItemName;

The grid-area property is basically the shorthand of following CSS properties:

CSS grid-area: gridItemName Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; grid-template-areas: 'myar myar myar'; gap: 4px;
         background-color: peru;}
      div.abc > div {background-color: maroon; color: whitesmoke; padding: 10px;}
      .myClassOne {grid-area: myar; text-align: center;}
   </style>
</head>
<body>

   <div class="abc">
      <div class="myClassOne">codescracker.com</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
   </div>
   
</body>
</html>
Output
codescracker.com
B
C
D
E
F
G

Note - The grid-template-areas property is used to define the area of a/multiple grid item(s). Named grid items are referenced using the grid-template-areas property.

Note - Notice the quotes, that is 'myar myar myar'

Now the question is, what if we need to span the area of a particular grid item using its name, for not the complete row ?
The answer can easily be tracked using the example given below:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; grid-template-areas: 'myar myar myar . .'; gap: 4px;}
      div.abc > div {border: 1px solid firebrick; padding: 10px;}
      .myClassOne {grid-area: myar; text-align: center;}
   </style>
</head>
<body>

   <div class="abc">
      <div class="myClassOne">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
      <div>H</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G
H

In above example, consider the following CSS code:

grid-template-areas: 'myar myar myar . .';

The first three columns refers to the grid item named myar, whereas the last two columns refers to random grid items.

Note - One period (.) refers to one random grid item. Therefore, two periods refers to two random grid items, in above example.

Another question is, what if we need to span the named grid item for multiple rows and columns ?
Again this answer, can also be tracked using following example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; gap: 4px;
               grid-template-areas: 'myar myar . . .' 'myar myar . . .' 'myar myar . . .';}
      div.abc > div {border: 1px solid firebrick; padding: 10px;}
      .myClassOne {grid-area: myar; text-align: center;}
   </style>
</head>
<body>

   <div class="abc">
      <div class="myClassOne">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
      <div>H</div>
      <div>I</div>
      <div>J</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G
H
I
J

In above example, consider the following CSS code:

grid-template-areas: 'myar myar . . .' 'myar myar . . .' 'myar myar . . .'

From above code, the following one:

'myar myar . . .'

is used to span the grid item named myar for total of 5 columns with 3 random grid items. And since this is used for three times, therefore the same grid area with 5 columns gets created or spanned for 3 rows. Therefore, for clear understanding, you can also write the above code, in this way:

grid-template-areas: 'myar myar . . .'
                     'myar myar . . .'
                     'myar myar . . .';

CSS grid-area Example

This is the last example of grid-area property in CSS. This example is created to layout a WebPage using grid. I've named all grid items and uses those to create the layout:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; grid-template-areas: 'h h h' 'm c o' 'f f f';}
      div.container > div {border: 1px solid firebrick; padding: 10px; text-align: center;}
      #header {grid-area: h;}
      #menu {grid-area: m; min-height: 300px;}
      #content {grid-area: c; min-height: 300px;}
      #other {grid-area: o; min-height: 300px;}
      #footer {grid-area: f;}
   </style>
</head>
<body>

   <div class="container">
      <div id="header">Header</div>
      <div id="menu">Menu</div>
      <div id="content">Content</div>
      <div id="other">Other</div>
      <div id="footer">Footer</div>
   </div>
   
</body>
</html>
Output
Content
Other

To increase the area (column size) of any grid items say c (for content), increase its count in this way:

grid-template-areas: 'h h h h h h' 'm c c c c o' 'f f f f f f';

Now the size (width) of grid item having grid-area named c gets increased for 4 columns. Now the output will be:

Content
Other

CSS Online Test


« Previous Tutorial Next Tutorial »



© Copyright 2021. All Rights Reserved.

CodesCracker