Имитировать встроенный блок с повторением сетки CSS, но не занимать неиспользуемые пробелы - PullRequest
Новая
       6

Имитировать встроенный блок с повторением сетки CSS, но не занимать неиспользуемые пробелы

1 голос
/ 09 января 2020

У меня есть несколько элементов DIV, которые я хотел бы отображать рядом (если позволяет разрешение экрана). Ранее я использовал display: inline-block для достижения этой цели. Однако содержимое элементов DIV является динамическим c, и оно выглядит неопрятно, когда начинают происходить разрывы строк.

Сетка CSS, кажется, способна решить эту проблему, но есть последний фрагмент загадка, с которой я борюсь.

При использовании repeat с minmax(), неиспользуемые пробелы создаются при расширении div для заполнения пустого пространства. Мне нужно предотвратить расширение div'а за пределы его содержимого, потому что на больших экранах расстояние между ними слишком велико:

enter image description here

Есть ли Любой способ предотвратить расширение ячеек сетки (или элементов div) в пустое пространство?

  1. Минимальное пространство, которое должна занимать ячейка сетки, - это размер ее содержимого
  2. Максимальное пространство ячейка сетки должна занимать четверть экрана
  3. Если div нужно обернуть, то они должны находиться на одной линии с линиями сетки

S CSS ниже, с сопровождающим CodePen здесь : 

.SideBySideContainer {
    > div {
        border: 1px solid red;
        padding:1em;
    }
}

@media all and (max-width: 899px) {
    /* Small screens (will be improved to use @supports for grid support) */
    .SideBySideContainer {
        > div {
            display: inline-block;
            vertical-align: top;
        }

        > div:not(:last-of-type) {
            margin-right: 1em;
        }

        > div:first-of-type {
            max-width: calc(50% - 2em);
        }
    }
}
@media all and (min-width: 900px) {
    .SideBySideContainer {
        display: grid;
        grid-gap: 1em;
        grid-auto-flow: dense;
        grid-auto-rows: minmax(5em, auto);

        &.FourCols {
            /* Problem seems to be with minmax() here */
            grid-template-columns: repeat(auto-fill, minmax(10em, 20%));
        }
    }
}

Обновление - проблемы с inline-flex

Предложенный ответ должен был использовать inline-flex. Тем не менее, это выглядит ужасно, когда содержимое длинное и вызывает две проблемы:

  1. Содержимое превышает границы / границы контейнера
  2. Элементы div не переносятся, а выталкиваются из screen

Демонстрационная ссылка

1 Ответ

1 голос
/ 09 января 2020

Установка максимальной ширины в непосредственных вложенных элементах div 

.SideBySideContainer > div {
  border: 1px solid red;
  padding: 1em;
  margin: 1em;
}

@media all and (max-width: 899px) {
  /* Small screens (will be improved to use @supports for grid support) */
  .SideBySideContainer > div {
    display: inline-block;
    vertical-align: top;
  }

  .SideBySideContainer > div:not(:last-of-type) {
    margin-right: 1em;
  }

  .SideBySideContainer > div:first-of-type {
    max-width: calc(50% - 2em);
  }
}
@media all and (min-width: 900px) {
  .SideBySideContainer {
    display: inline-flex;
  }
  .SideBySideContainer.FourCols > div {
    max-width: calc(100% / 4);
  }
}
<div class="SideBySideContainer FourCols">
  <div>
    <h3>Block 1</h3>
    <p>
      <select>
        <option val="">Foo</option>
      </select>
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  <div>
    <h3>Block 2</h3>
    <p>
      <select>
        <option val="">Bar</option>
      </select>
    </p>
  </div>
  <div>
    <h3>Block 3</h3>
    <p>
      <select>
        <option val="">Foo Bar</option>
      </select>
    </p>
  </div>
  <div>
    <h3>Block 4</h3>
    <p>
      <select>
        <option val="">Bar Foo</option>
      </select>
    </p>
  </div>
</div>
...