CSS Grid doesn't work as expected (grid areas)

Question

Could somebody help me to figure out why the following example of CSS Grid doesn't work as expected? Here's a link into Codepen:

.cards {
  margin: 0;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "a a b"
    "c d d"
    "c e e";
}

.card {
  background-color: #1E88E5;
  padding: 2em;
  color: #FFFFFF;
  line-height: 1.4;
  border-radius: 4px;
}

.card1 { grid-area: "a"; }
.card2 { grid-area: "b"; background-color: #4CAF50; }
.card3 { grid-area: "c"; background-color: #FFCA28; }
.card4 { grid-area: "d"; background-color: #F06292; }
.card5 { grid-area: "e"; background-color: #FF8A80; }

For some reason grid areas are not properly structured. Probably I forgot something but I couldn't figure out what exactly. Any help is appreciated. Thank you!

The expected result is to have cards placed in according to the “grid-template-areas” paramether. For example, card #1 should take 2 column cells in the first row, card #4 should include the first column cells of rows 2 and 3, etc. — Nekto
– Nekto, Commented Nov 18, 2017 at 14:38

VXp · Accepted Answer · 2019-01-12 10:48:07Z

7

Just remove the quotation marks from the grid-area values:

.card1 { grid-area: a; }
.card2 { grid-area: b; background-color: #4CAF50; }
.card3 { grid-area: c; background-color: #FFCA28; }
.card4 { grid-area: d; background-color: #F06292; }
.card5 { grid-area: e; background-color: #FF8A80; }

body {
  text-align: center;
}

.wrap {
  max-width: 70em;
  text-align: left;
  margin: 0 auto;
}

.cards {
  margin: 0;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "a a b"
    "c d d"
    "c e e";
}

.card {
  background-color: #1E88E5;
  padding: 2em;
  color: #FFFFFF;
  line-height: 1.4;
  border-radius: 4px;
  
  h3 {
    margin-top: 0;
  }
}

.card1 { grid-area: a; }
.card2 { grid-area: b; background-color: #4CAF50; }
.card3 { grid-area: c; background-color: #FFCA28; }
.card4 { grid-area: d; background-color: #F06292; }
.card5 { grid-area: e; background-color: #FF8A80; }

<div class="wrap">
  <div class="cards">
    <div class="card card1"><h3>Card 1</h3>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</div>
    <div class="card card2"><h3>Card 2</h3>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.</div>
    <div class="card card3"><h3>Card 3</h3>At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.</div>
    <div class="card card4"><h3>Card 4</h3>Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.</div>
    <div class="card card5"><h3>Card 5</h3>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination.</div>
  </div>
</div>

edited Jan 12, 2019 at 10:48

answered Nov 18, 2017 at 16:27

VXp

12.1k6 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

G-Cyrillus Over a year ago

Also, grid-template-columns becomes useless since grid-template-areas takes over and actually does the grid layout description codepen.io/anon/pen/qVprPO

Michael Benjamin Over a year ago

@G-Cyr, actually, grid-template-columns still matters and makes a difference. With 1fr 1fr 1fr the columns distribute space on the row evenly. Without it, the columns resolve to auto width, which renders a different layout.

Nekto Over a year ago

@Michael_B Thank you or pointing this out! Yes, I've noticed that the layout becomes changed with and without grid-template-columns

Collectives™ on Stack Overflow

CSS Grid doesn't work as expected (grid areas)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related