CODEWITHSUNDEEP
csscss-grid
Japhheth
Japhheth

Reputation: 19

How to fix my grid items from disappearing when given a style attribute "Grid area"

I'm setting up a page that has details of company employees. my problem is that i tried giving my grid items a "grid area" style attribute so that i can use the "grid name" when defining my grid template areas for my container. but suddenly my items disappear. Please what do i need to do to fix the problem ?

 .container{
         border-right: 2px solid grey;
         border-left: 2px solid grey;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-gap: 10px;
         justify-items: center;
         margin-top: 100px; 
         grid-template-areas {
         "head head head"
         "  .  side  ."
         "foot foot foot";
    }
   }



.grid-1{
     display: grid;
     grid-area: head;
}
 .grid-2{
        display: grid;
        grid-area: side;

   }
    .grid-3{
        display: grid;
        grid-area: foot;
   }

i expect the output of my grid to still show irrespective of the "grid-area" style attribute used but it disappears.

Upvotes: 1

Views: 3910

Answers (3)

IvanS95
IvanS95

Reputation: 5742

Seems to be working by fixing the typo in grid-template-areas and defining grid-auto-rows. I'd suggest looking into some other CSS property that might be causing the issue since what you provided works pretty well with minor fixes.

.container {
  border-right: 2px solid grey;
  border-left: 2px solid grey;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  justify-content: center;
  grid-template-areas: "head head head" ".  side  ." "foot foot foot";
}

.grid-item {
  border: 1px solid black;
}

.grid-1 {
  grid-area: head;
  display: grid;
}

.grid-2 {
  grid-area: side;
  display: grid;
}

.grid-3 {
  grid-area: foot;
  display: grid;
}
<div class="container">
  <div class="grid-item grid-1">Head</div>
  <div class="grid-item grid-2">Side</div>
  <div class="grid-item grid-3">Foot</div>
</div>

Upvotes: 1

Salvatore
Salvatore

Reputation: 12064

Looking at this documentation, I see a segment which says:

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

I see your use of grid-template-columns but none of grid-template-rows. Changing .container to include grid-template-rows may help, something like this (for three rows): 

.container{
         border-right: 2px solid grey;
         border-left: 2px solid grey;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr 1fr;
         grid-gap: 10px;
         justify-items: center;
         margin-top: 100px; 
         grid-template-areas: "head head head"
                              "  .  side  ."
                              "foot foot foot";
}

Upvotes: 1

kisabelle
kisabelle

Reputation: 591

Your syntax for grid-template-areas is incorrect. The value should not be wrapped with curly braces, instead it should look like this:

 .container{
  height: 400px;
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  grid-template-areas: "head head head"
                       "  .  side  ."
                       "foot foot foot";
}

.grid-1{
  display: grid;
  grid-area: head;
  background-color: pink;
}
 .grid-2{
  display: grid;
  grid-area: side;
  background-color: blue;
}
.grid-3{
  display: grid;
  grid-area: foot;
  background-color: green;
}
<div class="container">
 <div class="grid-1">Header</div>
 <div class="grid-2">Side</div>
 <div class="grid-3">Footer</div>
</div>

Upvotes: 2

Related Questions