1

Can't understand... I always get the "invalid property value" error in browser on grid-template-areas.

If I try to get rid of it, the grid display works well.

The template I want to use seems quite simple though

#dv_reals {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "photo resume" "not not" "photo resume" "not not";
}

.photoReal {
    grid-area: photo;
    background-color: red;
}

.cont {
    
    grid-area: resume;
    background-color: yellow;
}

.vide {
    grid-area: not;
    background-color: pink;
}
<div id="dv_reals">
    <div class="photoReal">photo</div>
    <div class="cont">contenu</div>
    <div class="vide"></div>
    <div class="vide"></div>
    <div class="photoReal">photo</div>
    <div class="cont">contenu</div>
    <div class="vide"></div>
    <div class="vide"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Antoine
  • 165
  • 1
  • 2
  • 10
  • 1
    areas named the same must touch each other, so element can span through the grid. else the first occurance will be used by the grid system. it won't be smart enough to realize that this is a repeating pattern to fill where there's holes ... Your grid-area names is not a good idea :( – G-Cyrillus Jun 22 '18 at 12:46
  • 1
    `Unless those cells form a rectangle, the declaration is invalid.` maybe your declaration finally becomes single lined? https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas#Values – Justinas Jun 22 '18 at 12:48
  • ok i get it, seems obvious now you say it, I thought the problem was from my "vide" content not photo or real. Thanks all – Antoine Jun 22 '18 at 12:53
  • 1
    Also, if you use the grid system, your 'empty' div can span through a few cells . https://codepen.io/gc-nomade/pen/RJyErY you may also use grid-gap https://codepen.io/gc-nomade/pen/vrjvKz ;) – G-Cyrillus Jun 22 '18 at 12:56
  • grid gap.... nice idea. 1st attempt at display:grid. I'll dig the idea. Thanks – Antoine Jun 22 '18 at 13:39

0 Answers0