Ответы пользователя по тегу CSS Grid
  • Как расположить элементы на гридах?

    JamesHatfield
    @JamesHatfield
    Front-end developer
    Структура будет такая, но это реально лучше на flex сверстать.

    <div class="mainB">
              <div class="main"></div>
              <div class="main"></div>
              <div class="main"></div>
              <div class="main"></div>
              <div class="main"></div>
              <div class="main"></div>
    		  <div class="main"></div>
          </div>


    .mainB{
    	display: grid;
    	grid-template-columns: repeat(8, 2fr);
    	grid-template-rows: 2fr 2fr;
    	grid-template-areas:
    	"a a b b c c d d"
    	". e e f f g g .";
    	grid-gap: 10px;
    	background-color: #999;
    	width: 100%;
    	height: 100vh;
    }
    
    .main{
    	background-color: red;
    }
    
    .main:nth-of-type(1){
    	grid-area: a;
    }
    
    .main:nth-of-type(2){
    	grid-area: b;
    }
    
    .main:nth-of-type(3){
    	grid-area: c;
    }
    
    .main:nth-of-type(4){
    	grid-area: d;
    }
    
    .main:nth-of-type(5){
    	grid-area: e;
    }
    
    .main:nth-of-type(6){
    	grid-area: f;
    }
    
    .main:nth-of-type(7){
    	grid-area: g;
    }
    Ответ написан
    Комментировать