时间戳

首页 > 解决方案 > CSS Grid won't wrap children when setting grid-row

html - CSS Grid won't wrap children when setting grid-row

问题描述

CODEPEN

Background:

I'm experimenting with Grid CSS and trying to get to this layout which is currently implemented to scale

Expected Layout enter image description here

Problem: On desktop the element-header should be 8 columns wide and if I don't add grid-rows to element-header and element than <div class="element">1</div> will fill in the next to element-header. Now if I add grid-rows my element will no longer wrap.

Current Layout (problem) enter image description here enter image description here

Question How can I fix my grid to match the "expected layout" screenshot above? i.e. .element will wrap and start on the second grid row

Code:

HTML:

<section class="section">
  <div class="container">
    <div class="samba-grid">
      <div class="element-header"><h1>I am a lot of header text that only goes 8 columsn wide</h1></div>
      <div class="element">1</div>
      <div class="element">2</div>
      <div class="element">3</div>
      <div class="element">4</div>     
    </div>
  </div>
</section>

CSS:

.section {
  width: 100%;
  display: block;
  background: red;
  box-sizing: border-box;
  padding: 40px 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    background: orange;
    padding: 56px 48px;
  }

  @media screen and (min-width: 1140px) {
    padding: 64px 48px;
    background: green;
  }
}

.container {
  margin: 0 auto;
  background: rgba(244,244,244, .25);
  max-width: 599px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    max-width: 1039px;
    background: rgba(244,244,244, .25);
  }

  @media screen and (min-width: 1140px) {
    max-width: 1032px;
    background: rgba(244,244,244, .25);
  }
}

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 'auto auto';
  grid-gap: 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 48px;
  }

  @media screen and (min-width: 1140px) {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 48px;
  }
}

h1 {
  font-size: 52px;
}
.element-header {
  grid-row: 1;
  grid-column: span 8; // SET THIS TO "span 12" TO SEE EXPECTED BEHAVIOR
}

.element {
  display: grid; // important to do this.
  background: rgba(0,0,0,.3);
  grid-column: span 3;
  grid-row: 2; // REMOVE THIS TO SEE EXPECTED BEHAVIOR

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    grid-column: span 3;
  }

  @media screen and (min-width: 1140px) {
    grid-column: span 4;
  }
}

标签： htmlcsscss-grid

解决方案

Take the header out of the grid container. Make it a standalone block-level element.

Below, place the grid container with only the images.

推荐阅读