CODEWITHSUNDEEP
htmlcsscss-grid
b-m-f
b-m-f

Reputation: 1328

Grid CSS not laying out areas correctly

I have the following HTML

.area-page-area1 {
  grid-area: area1;
}

.area-page-area2 {
  grid-area: area2;
}

.area-page-area3 {
  grid-area: area3;
}

.area-page-area4 {
  grid-area: area4;
}

.area-page-area5 {
  grid-area: area5;
}

.area-page-area6 {
  grid-area: area6;
}

.area-page-area7 {
  grid-area: area7;
}

.area-page {
  grid-template-columns: 0% 50.8% 100%;
  grid-template-rows: 0% 25% 50% 83.3333% 100%;
  display: grid;
  grid-template-areas: "area0 area4" "area1 area5" "area2 area6" "area3 area7";
  width: 500px;
  height: 600px;
}
<div class="area-page">
  <div class="area-page-area0">{ 0 }
  </div>
  <div class="area-page-area1">{ 1 }
  </div>
  <div class="area-page-area2">{ 2 }
  </div>
  <div class="area-page-area3">{ 3 }
  </div>
  <div class="area-page-area4">{ 4 }
  </div>
  <div class="area-page-area5">{ 5 }
  </div>
  <div class="area-page-area6">{ 6 }
  </div>
  <div class="area-page-area7">{ 7 }
  </div>
</div>

I would expect the areas to be laid out as I defined it in the grid-template-areas. Unfortunately the first area per row seems to be squashed in somewhere in the beginning, almost as if another area to put it in exists.

Is there anything that I forgot to set to make this work?

Upvotes: 0

Views: 66

Answers (2)

Gregory
Gregory

Reputation: 53

Here is W3 Schools Article on the Topic

Instead of using percentages, that give you a more rigid way of measurement to work with, I would recommend using "fr" typically 

* {
  border: solid 1px grey;
  padding: 10px;
}

.area-page {
   display: grid;
  grid-template-columns: 50% 50%; <!-- Changing these percentages, width of the area that it is within. I'd recommend the unit "fr", or fraction. How you'd apply it "grid-template-columns: fr fr;" Which would give you a similar result as the 50% 50%. --!>
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: "area0 area4" 
                       "area1 area5" 
                       "area2 area6" 
                       "area3 area7";
  width: 200px;
  height: 200px;
}

.area-page-area0 {
  grid-area: area0;
  background: yellow;
  color: black;
}
.area-page-area1 {
  grid-area: area1;
  background: blue;
  color: white;
}

.area-page-area2 {
  grid-area: area2;
  background: green;
  color: white;
}

.area-page-area3 {
  grid-area: area3;
  background: violet;
  color: white;
}

.area-page-area4 {
  grid-area: area4;
  background: yellow;
  color: black;
}

.area-page-area5 {
  grid-area: area5;
  background: pink;
  color: white;
}

.area-page-area6 {
  grid-area: area6;
  background: purple;
  color: white;
}

.area-page-area7 {
  grid-area: area7;
  background: orange;
  color: black;
}
<div class="area-page">
  <div class="area-page-area0">{ Index 0 }
  </div>
  <div class="area-page-area1">{ Index 1 }
  </div>
  <div class="area-page-area2">{ Index 2 }
  </div>
  <div class="area-page-area3">{ Index 3 }
  </div>
  <div class="area-page-area4">{ Index 4 }
  </div>
  <div class="area-page-area5">{ Index 5 }
  </div>
  <div class="area-page-area6">{ Index 6 }
  </div>
  <div class="area-page-area7">{ Index 7 }
  </div>
</div>

Upvotes: 2

Nick Lee
Nick Lee

Reputation: 852

They are squished because you have defined the first column and row to be a width of 0%. Each of those percentages will it a portion of your defined width/height and add up to 100%.

When defining the space for grid-template-rows each unit of space either fr, px, or % will take a portion of space from the parent container. Look at the example below. Also read up on the docs. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

* {
  border: solid 1px grey;
  padding: 10px;
}

.area-page {
   display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: "area0 area4" 
                       "area1 area5" 
                       "area2 area6" 
                       "area3 area7";
  width: 200px;
  height: 200px;
}


.area-page-area1 {
  grid-area: area1;
}

.area-page-area2 {
  grid-area: area2;
}

.area-page-area3 {
  grid-area: area3;
}

.area-page-area4 {
  grid-area: area4;
}

.area-page-area5 {
  grid-area: area5;
}

.area-page-area6 {
  grid-area: area6;
}

.area-page-area7 {
  grid-area: area7;
}
<div class="area-page">
  <div class="area-page-area0">{ 0 }
  </div>
  <div class="area-page-area1">{ 1 }
  </div>
  <div class="area-page-area2">{ 2 }
  </div>
  <div class="area-page-area3">{ 3 }
  </div>
  <div class="area-page-area4">{ 4 }
  </div>
  <div class="area-page-area5">{ 5 }
  </div>
  <div class="area-page-area6">{ 6 }
  </div>
  <div class="area-page-area7">{ 7 }
  </div>
</div>

Upvotes: 1

Related Questions