Question

我刚刚开始学习CSS网格，并且正在努力实现某种布局。我有一个包含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;
}

谢谢

CSS网格组可变宽度列到固定宽度

0 个答案: