Expanding cells in CSS grid layout

前端 未结 2 2013
无人共我
无人共我 2020-12-12 04:06

I have the following HTML/CSS

2条回答
  •  刺人心
    刺人心 (楼主)
    2020-12-12 04:48

    This is something better suited to flexbox but if your structure is as simplistic as you indicate the only-child can be used here.

    .main {
      display: grid;
      grid-template-columns: 2fr 1fr;
      margin-bottom: 1em;
    }
    
    
    /* The following is not essential - for decoration purposes only */
    
    .left {
      background-color: green;
      height: 25vh;
    }
    
    .left:only-child {
      grid-column: 1 / -1;
    }
    
    .right {
      background-color: orange;
    }
    Left
    Right
    Left

提交回复
热议问题