Grid CSS контейнер, который прокручивается горизонтально, когда дети используют grid-столбец? - PullRequest
Новая
       12

Grid CSS контейнер, который прокручивается горизонтально, когда дети используют grid-столбец?

4 голосов
/ 15 марта 2019

CODEPEN: https://codepen.io/matthewharwood/pen/ywKNVg

Я пытаюсь добиться этого макета в GridCSS:

enter image description here

Проблемы:

У меня проблемы с тем, чтобы дети .elements переполняли своих родителей .grid при использовании grid-column: span 4;.

Примечание:

  • Дети будут пик на мобильном телефоне
  • Сетка будет иметь полосы прокрутки, если дети переполнятся
  • Дети отлично следуют за сеткой.

Вопрос: Можно ли переполнить элементы сетки CSS полосой прокрутки, когда ее дочерние элементы выровнены по сетке с помощью grid-column? если да, то какие свойства мне не хватает? Если нет, то есть ли обходные пути для достижения этих макетов, показанных выше, при использовании CSS Grid?

HTML: 

<section>
  <div class="container">
    <div class="grid">
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
     <!-- UNCOMMENT BELOW   -->
    <!--       <div class="element">
    <img src="https://placebear.com/400/500" alt="">
    <div class="copy">
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
    </div>
  </div> -->
    </div>
  </div>
</section>

CSS: 

section {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 64px 48px;
  background: green;
}

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

.grid {
  display: grid;   
  grid-auto-flow: column;  
  grid-gap: 10px; 
  overflow: auto;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 48px;
}


.element {
  padding:30px 0;
  text-align: center;
  background: papayawhip;
  grid-column: span 4;
}

1 Ответ

0 голосов
/ 15 марта 2019

Вам просто нужно избавиться от grid-template-columns: repeat(12, 1fr); 1 .Нет необходимости определять шаблон столбца, так как ваш номер элемента неизвестен, пусть браузер обрабатывает это автоматически, определяя неявную сетку.

Вам может потребоваться определить grid-auto-columns, чтобы установить ширину каждого столбца. 

section {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 64px 48px;
  background: green;
}

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

.grid {
  display: grid;
  grid-auto-flow: column;
  overflow: auto;
  grid-gap: 48px;
  grid-auto-columns: minmax(40px, 1fr);
}

.element {
  padding: 30px 0;
  text-align: center;
  background: papayawhip;
  grid-column: span 4;
}

img {
  max-width: 100%;
}
<section>
  <div class="container">
    <div class="grid">
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="grid">
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>

    </div>
</section>

Снимите grid-auto-columns: minmax(40px,1fr); сверху, и вы увидите это для верхней сетки:

enter image description here

Красные линии - это ваши столбцы с шириной 0, и, как вы можете видеть, каждый элемент просто равен 3 пробелам.Установив minmax(), мы будем использовать 1fr, когда нет переполнения и только несколько элементов (достаточно места для 1fr).Когда будет много элементов, а 1fr станет меньше, вы зафиксируете ширину на 40px.

В основном каждый элемент будет иметь min-width, равный 4*40px + 3*48px в этом случае.и если вы удалите 1fr и используете grid-auto-columns: 40px;, то min-width будет просто width.

1 Проблема при определении столбцов шаблоначто вы сказали браузеру, что у вас есть 12 столбцы с 1fr, и позже вы будете использовать больше, если у вас более 3 элементов, таким образом, неявная сетка будет содержать более 12 столбцов, и браузер может рассчитать их ширинуотличается от того, что вы установили.

Вот упрощенный пример для иллюстрации: 

.grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow: column;
}
img {
  grid-column:span 2;
  border:2px solid green;
  max-width:100%;
}
<div class="grid">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
</div>

Обратите внимание на то, как ширина первых двух изображений отличается от последних 2. Первые находятся внутри определенной вами сетки, а другие - внутри созданной.браузерами.

Устанавливая только grid-auto-columns, вы уверены, что все будут иметь одинаковую ширину: 

.grid {
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns:minmax(40px,1fr);
}
img {
  grid-column:span 2;
  border:2px solid green;
  max-width:100%;
}
<div class="grid">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...