CSS Grid Group переменной ширины столбцов в фиксированной ширины - PullRequest
Новая
       6

CSS Grid Group переменной ширины столбцов в фиксированной ширины

0 голосов
/ 21 сентября 2018

Я только начал изучать CSS Grids и изо всех сил стараюсь достичь определенного макета.У меня есть сетка с 4 столбцами, и я хочу, чтобы общая ширина столбца 1 + столбец 2 равнялась 50% сетки, а общая ширина столбца 3 + столбец 4 равнялась 50% сетки.Сложность состоит в том, что мне нужно, чтобы отдельные столбцы имели переменную ширину, в частности столбцы 1 и 3, чтобы расширяться за счет содержащегося в них текста, а столбцы 2 и 4 увеличивались и уменьшались по отношению к ширине столбцов 1 и 3. Это возможно с помощьюмакет сетки?

Я использовал Codepen для проверки: https://codepen.io/anon/pen/MqxJNW

<div class="outergrid">
<div class="one">One</div>
<div class="two">Two </div>  
<div class="three">Three</div>
<div class="four">Four</div>   
<div class="five">Five</div>
<div class="six">Six</div>    
<div class="Seven">Seven</div>
<div class="Eight">Eight</div>  
<div class="Nine">Nine</div>
<div class="Ten">Ten</div>    


* {box-sizing: border-box;}
.outergrid 
{
  display:grid;
  max-width: 540px;
  margin: 0 auto;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(3, auto);
  gap: 5px 5px;
}
.outergrid > div 
{
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
  word-break: break-word;
}

Спасибо

...