CSS решетка проблемы с фоном и обтеканием

Question

У меня есть сетка, в которой я хочу, чтобы она работала примерно так, как есть, за исключением случаев, когда есть только 1 или 2 ячейки, я хочу, чтобы она имела автоматический размер, а не набор из 3, при этом последняя из них содержит пространство ячейки.Когда я устанавливаю значение повтора (3, 100 пикселей) на автоподгонку, это убивает расположение столбцов.Мне все еще нужно обернуть в 3.

.parent {
  background: #f4f4f5;
  font-size:2em;
  border: 1px solid black;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}
.parent .wrapper {
  display: inline-grid;
  grid-template-columns: repeat(3, 100px);
  box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
  grid-auto-flow: row;
  background-color: white;
}

.cell {
  border: 1px solid gray;
  background-color: white;
}

.cell .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  text-align: center;
}

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 4</div>
    </div>
  </div> 
</div>

Answer 1

Итак, вы хотите, чтобы сетка-контейнер автоматически определяла размер менее 3-х элементов и переносилась после этого - вот решение, которое использует неявные сетки .

• используйте один столбец контейнер встроенной сетки :

  display: inline-grid;
  grid-template-columns: 100px;
  grid-template-rows: 100px;
  

• размер вашей неявной сетки как 100px x 100px с использованием:

  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
  

• поместите второй элемент во второй ряд , используя grid-column: 2;и ваш третий элемент в третий ряд с использованием grid-column: 3

Теперь у вас будет сетка 3 x 3 - см. демонстрацию ниже:

* {
  box-sizing: border-box;
}

.parent {
  background: #f4f4f5;
  font-size: 2em;
  border: 1px solid black;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}

.parent .wrapper {
  display: inline-grid;
  grid-template-columns: 100px; /* one column layout */
  grid-template-rows: 100px; /* sizes the rows */
  grid-auto-columns: 100px; /* sizing columns of implicit grid */
  grid-auto-rows: 100px; /* sizing rows of implicit grid */
  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  grid-auto-flow: row;
  background-color: white;
}

.cell:nth-child(2) {
  grid-column: 2; /* places it in the second column */
}

.cell:nth-child(3) { 
  grid-column: 3; /* places it in the third column */
}

.cell {
  border: 1px solid gray;
  background-color: white;
}

.cell .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100px; */
  /* height: 100px; */
  height: 100%; /* added */
  text-align: center;
}

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 4</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 4</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 5</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 6</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 7</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 8</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 9</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 10</div>
    </div>
  </div>
</div>