Search code examples
htmlcssfrontendcss-grid

Simple CSS Grid question : Col not taking full width

I was messing around on CSS grid to test things and especially grid areas and I don't succeed on doing this simple thing :

enter image description here

I'm trying to get the content in full width under 1500px width device. I'm pretty sure I'm missing a very simple thing, so if someone know, please feel free to help :)

https://codepen.io/N3G/pen/jOMLPMz

<div class="main-wrapper">
  <div class="menu">
    <ul>
      <li><a href="#">Lien du menu</a></li>
      <li><a href="#">Lien du menu</a></li>
      <li><a href="#">Lien du menu</a></li>
      <li><a href="#">Lien du menu</a></li>
    </ul>
  </div>
  <div class="left">
    Left
  </div>
  <main class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </main>
  <aside class="right">
    Right
  </aside>
  <footer class="footer">
    Footer
  </footer>
</div>

*, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 15px;
}

.main-wrapper {
  height: 100vh;
  width: 100%;
  display: grid;
  gap: 15px;
  grid-template-rows: 80px 1fr 80px;
  grid-template-columns: 250px 1fr 250px;
  grid-template-areas: 
    "menu menu menu"
    "left content right"
    "footer footer footer"
}

@media screen and (max-width: 1500px) {
  .main-wrapper {
    grid-template-rows: 1fr 250px 80px;
    grid-template-columns: 250px 1fr 1fr;
    grid-template-areas: 
      "menu content content"
      "menu left right"
      "footer footer footer"
  }
}

.menu {
  grid-area: menu;
  background: grey;
}

.menu ul {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

@media screen and (max-width: 1500px) {
  .menu ul {
    flex-direction: column
  }
}

.main-wrapper > * {
  padding: 15px;
  border: 1px solid #999;
}

.left {
  grid-area: left;
  background: #ccc
}

.right {
  grid-area: right;
  background: #ccc
}

.content {
  grid-area: content
}

.footer {
  grid-area: footer;
  background: darkgrey
}

Thanks guys.

Solution

  • You have an incorrect selector which does not match your HTML

    .content {
  grid-area: content
}

    should be

    .main {
  grid-area: content
}