Настройте столбцы сетки в соответствии с его содержимым. - PullRequest
Новая
       4

Настройте столбцы сетки в соответствии с его содержимым.

0 голосов
/ 26 февраля 2020

У меня есть css Сетка с 8 элементами. Столбцы имеют минимум 100 пикселей и максимум 1 кадр.

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

Код css, который у меня есть для сетки:

.grid-1{ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

Я знаю, что могу решить эту настройку, установив фиксированный размер для 1-го столбца, например:

.grid-2{ grid-template-columns: 210px repeat(auto-fit, minmax(100px, 1fr)); }

Но дело в том, что я хочу использовать этот код в других разделах .

Весь код здесь https://jsfiddle.net/hcx72rgy/

1 Ответ

1 голос
/ 26 февраля 2020

Чтобы уменьшить столбец до ширины содержимого с помощью minmax (), вы можете использовать max-content для максимального размера и 0 для минимального размера, чтобы он полностью сжимался для самого широкого содержимого столбца, в котором он находится. 

repeat(auto-fit, minmax(0,max-content));

https://jsfiddle.net/ce6zgur8/

* {
  box-sizing: border-box;
}
.grid-1{grid-template-columns: repeat(auto-fit, minmax(0,max-content));}
.grid-2{grid-template-columns: 210px repeat(auto-fit, minmax(0,max-content))}


body {
  padding: 0 0 20px 0;
  background-color: #eee;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 300;
  color: #555;
  width: 100%;
  height: 100%;
}
h2{
  margin:30px 0 10px 0;
  font-size:20px;
  color: black;
}
.wrapper {
  padding: 10px;
  font: normal normal 14px/12px "Roboto", Calibri, Arial, sans-serif;
  width:1366px;
  border:1px solid red;
  margin: 5em auto;
}

.grid-thing {
  margin: 0 0 20px 0;
  display: grid;
}

.grid-thing > div{
  text-align: center;
  border:1px solid green;
}
<div class="wrapper">
  <h2>GRID 1</h2>
  <div class="grid-thing grid-1">
    <div>
      <label for="">Search</label>
      <input type="text" placeholder="Number, text, whatever...">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <button>Button 1</button>
    </div>
    <div>
      <button>Button 2</button>
    </div>
    <div>
      <input type="checkbox">
      <label for="">Check?</label>
    </div>
    <div>
      <button>Button 3</button>
    </div>
    <div>
      <button>Button 14</button>
    </div>
  </div>
  <hr>
  <h2>GRID 2</h2>
  <div class="grid-thing grid-2">
    <div>
      <label for="">Search</label>
      <input type="text" placeholder="Number, text, whatever...">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <button>Button 1</button>
    </div>
    <div>
      <button>Button 2</button>
    </div>
    <div>
      <input type="checkbox">
      <label for="">Check?</label>
    </div>
    <div>
      <button>Button 3</button>
    </div>
    <div>
      <button>Button 14</button>
    </div>
  </div>
</div>

для напоминания https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

См. Также fit-content(x); https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

...