CODEWITHSUNDEEP
htmlcsscss-grid
Karoly
Karoly

Reputation: 99

CSS grid divs height auto

How can I do to have height auto on .text and .img divs and not height 100%?

* {
  margin: 0px;
  padding: 0px;
}

html,
body,
.start {
  height: 100%;
}

.header {
  height: 80px;
  background: blue;
}

.slider {
  height: calc(100% - 80px);
  background: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1;
  grid-template-areas: "text img";
}

.text {
  grid-area: text;
  background: green;
}

.img {
  grid-area: img;
  background: yellow;
}

@media screen and (max-width: 768px) {
  .slider {
    grid-template-areas: "text text" "img img";
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="a.css">
</head>

<body>

  <div class="start">
    <header class="header">
      <h2>hola</h2>
    </header>
    <div class="slider">
      <div class="text">
        <h1>titulo</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
      </div>
      <div class="img">
        <h1>titulo</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 83

Answers (1)

Chris Sandvik
Chris Sandvik

Reputation: 1927

EDIT

Added container around grid to allow for background styling.

Just remove the height property on your .slider element. The .img and .text elements are taking up the remaining space to fill in the extra space.

* {
  margin: 0px;
  padding: 0px;
}

html,
body,
.start {
  height: 100%;
}

.header {
  height: 80px;
  background: blue;
}

.body-background {
  height: calc(100% - 80px);
  /* apply background here */
}

.slider {
  background: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "text img";
}

.text {
  grid-area: text;
  background: green;
}

.img {
  grid-area: img;
  background: yellow;
}

@media screen and (max-width: 768px) {
  .slider {
    grid-template-areas: "text text" "img img";
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="a.css">
</head>

<body>

  <div class="start">
    <header class="header">
      <h2>hola</h2>
    </header>
    <div class="body-background">
      <div class="slider">
        <div class="text">
          <h1>titulo</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
        </div>
        <div class="img">
          <h1>titulo</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions