Два столбца равной ширины (где ширина задается самым длинным), а третий заполняет оставшееся пространство - PullRequest
Новая
       7

Два столбца равной ширины (где ширина задается самым длинным), а третий заполняет оставшееся пространство

5 голосов
/ 26 марта 2020

Я хочу создать макет, подобный этому, используя CSS Сетка, если это возможно, но открыты для других возможностей:

enter image description here

В принципе, я хочу иметь контейнер .grid, который содержит 3 элемента (input, btn1, btn2). Во-первых, ширина btn1 и btn2 должна быть одинаковой и определяется тем, какой элемент нуждается в большем пространстве (т. Е. Более длинное содержимое). После этого оставшийся элемент (вход) должен взять все, что осталось. Я придумал этот фрагмент, но наверняка он не может работать. 

.grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
}
<div class="grid">
  <input />
  <button>Foo</button>
  <button>Bar Bar Bar</button>
</div>

Как можно добиться этого, используя только CSS?

Ответы [ 2 ]

2 голосов
/ 26 марта 2020

Используйте вложенный контейнер сетки для кнопок. 

.grid {
  display: grid;
  grid-template-columns: 1fr auto; /* see note 1 */
}

.button-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* see note 2 */
}
<div class="grid">
  <input />
  <div class="button-container">
    <button>Foo</button>
    <button>Bar Bar Bar</button>
  </div>
</div>
<br>
<div class="grid">
  <input />
  <div class="button-container">
    <button>Foo</button>
    <button>Bar Bar Bar Bar Bar Bar</button>
  </div>
</div>
<br>
<div class="grid">
  <input />
  <div class="button-container">
    <button>Foo</button>
    <button>Bar Bar Bar Bar Bar Bar Bar Bar Bar</button>
  </div>
</div>

Примечания:

  1. 1fr в первом столбце занимает все доступное горизонтальное пространство, прикрепляя второй столбец к максимально правое.

  2. 1fr 1fr на вложенных столбцах приводит к равному разделению горизонтального пространства во вспомогательном контейнере независимо от ширины содержимого.

2 голосов
/ 26 марта 2020

Вот взлом (да взлом!), Который основан на том факте, что вы знаете ширину контейнера.

Ниже я рассмотрю контейнер на всю страницу (ширина определяется с помощью 100vw) 

.grid {
  display: grid;
  margin:50px 5px;
  grid-template-columns:1fr auto;
}
/* they will overlap so the longest one will define the size of auto*/
button {
  grid-column:2;
  grid-row:1;
}

/* we translate the first one to disable the overlap*/
button:first-of-type {
  transform:translateX(-100%);
}

input {
  /* 100vw - 10px = width of the grid container 
     100% is the width of the 1fr
     ((100vw - 10px) - 100%) will be the width of the buttons
  */
  width:calc(100% - ((100vw - 10px) - 100%));
  box-sizing:border-box;
}

body {
 margin:0;
}
<div class="grid">
  <input >
  <button>Foo</button>
  <button>Bar Bar Bar</button>
</div>
...