The grid area property

The grid area property offers to specify the positioning properties in a single declaration. It is a shorthand property for the four other properties including grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.

Example 1: The example illustrates grid-area Property where item 9 starts on row-line 3 and column line 1, and ends on row-line 6 and column line 3.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
  
    <div class="containergrid"> 
        <div class="box" id="box1">grid_Item1</div> 
        <div class="box" id="box2">grid_Item2</div> 
        <div class="box" id="box3">grid_Item3</div> 
        <div class="box" id="box4">grid_Item4</div> 
        <div class="box" id="box5">grid_Item5</div> 
        <div class="box" id="box6">grid_Item6</div> 
        <div class="box" id="box7">grid_Item7</div> 
        <div class="box" id="box8">grid_Item8</div> 
        <div class="box" id="box9">grid_Item9</div> 
        <div class="box" id="box10">grid_Item10</div> 
        <div class="box" id="box11">grid_Item11</div> 
        <div class="box" id="box12">grid_Item12</div> 
        <div class="box" id="box13">grid_Item13</div> 
        <div class="box" id="box14">grid_Item14</div> 
        <div class="box" id="box15">grid_Item15</div> 
        <div class="box" id="box16">grid_Item16</div> 
        <div class="box" id="box17">grid_Item17</div> 
        <div class="box" id="box18">grid_Item18</div> 
        <div class="box" id="box19">grid_Item19</div> 
        <div class="box" id="box20">grid_Item20</div> 
    </div> 
</body> 
  
</html>

CSS

.containergrid{ 
    display: grid; 
    grid-template-columns: repeat(4, auto) ; 
    gap: 10px; 
    background-color: rgb(159, 206, 159) 
} 
  
#box9{ 
    grid-area: 3/1/6/3; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
.containergrid>div{ 
   padding: 10px; 
   font-size: 20px; 
} 
  
.box{ 
    border: 2px solid green; 
}

Output:

Example 2: The example illustrates grid-area Property where box 9 starts on row-line 3 and column line 1 and spans to 3 rows and 3 columns.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="containergrid"> 
        <div class="box" id="box1">grid_Item1</div> 
        <div class="box" id="box2">grid_Item2</div> 
        <div class="box" id="box3">grid_Item3</div> 
        <div class="box" id="box4">grid_Item4</div> 
        <div class="box" id="box5">grid_Item5</div> 
        <div class="box" id="box6">grid_Item6</div> 
        <div class="box" id="box7">grid_Item7</div> 
        <div class="box" id="box8">grid_Item8</div> 
        <div class="box" id="box9">grid_Item9</div> 
        <div class="box" id="box10">grid_Item10</div> 
        <div class="box" id="box11">grid_Item11</div> 
        <div class="box" id="box12">grid_Item12</div> 
        <div class="box" id="box13">grid_Item13</div> 
        <div class="box" id="box14">grid_Item14</div> 
        <div class="box" id="box15">grid_Item15</div> 
        <div class="box" id="box16">grid_Item16</div> 
        <div class="box" id="box17">grid_Item17</div> 
        <div class="box" id="box18">grid_Item18</div> 
        <div class="box" id="box19">grid_Item19</div> 
        <div class="box" id="box20">grid_Item20</div> 
    </div> 
</body> 
  
</html>

CSS

.containergrid{ 
    display: grid; 
    grid-template-columns: repeat(4, auto) ; 
    gap: 10px; 
    background-color: rgb(159, 206, 159) 
} 
  
#box9{ 
    grid-area: 3/1/span 3/ span 3; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
.containergrid>div{ 
   padding: 10px; 
   font-size: 20px; 
} 
  
.box{ 
    border: 2px solid green; 
}

Output:

CSS Grid Items

CSS Grid Items are contained in the Grid Container, where for each row, the container will contain one grid item for each column, by default. The Grid Items can also be styled, which will span in multiple columns and/or rows.

Grid Item is a no of child boxes wrapped inside the grid container. There are various properties including, grid-column property, grid-row property, grid-area property, naming grid, and order of the items. These grid items are responsive and work well on all screen sizes.

Table of Content

The grid-column Property
The grid-row Property
The grid area property
Naming Grid items
Order of the items

Tags:

#CSS-Questions #CSS #Web Technologies

The grid-row Property

Naming Grid items

The grid area property

HTML

CSS

HTML

CSS

CSS Grid Items

Similar Reads