Как складывать колонки css grid?

Question

[Игорь]

Добрый день, подскажите как складывать колонки на мобильных устройствах как на картинке?


На больших экранах работает корректно:

.grid
      display: grid
      //grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
      grid-template-columns: 3fr repeat(5, 2fr)
      grid-row-gap: 5px
      grid-auto-rows: 34px 1fr
      .x-col-1
         grid-column-start: 1
         grid-row-start: span 2
      .x-col-2
         grid-row-start: 1
         grid-column-start: 2
      .x-col-3
         grid-row-start: 2
         grid-column-start: 2
      .x-col-4
         grid-row-start: 1
         grid-column-start: 3
      .x-col-5
         grid-row-start: 2
         grid-column-start: 3
      .x-col-6
         grid-row-start: 1
         grid-column-start: 4
      .x-col-7
         grid-row-start: 2
         grid-column-start: 4
      .x-col-8
         grid-row-start: 1
         grid-column-start: 5
      .x-col-9
         grid-row-start: 2
         grid-column-start: 5
      .x-col-10
         grid-row-start: 1
         grid-column-start: 6
      .x-col-11
         grid-row-start: 2
         grid-column-start: 6

Answer 1

[Евгений Залецкий]

Через @media?

Comments

[Игорь]

переопределить количество и позицию?

[Евгений Залецкий]

Игорь, прочитай, если не правильно дал совет, прости за потраченное твоё время.

Answer 2

[Игорь]

Спасибо! Сделал через media

Если кому надо

@media screen and (max-width: 991.98px)
   .front-page
      .grid
         grid-template-columns: repeat(3, 1fr)
         grid-row-gap: 0px
         .x-col-1
            grid-column-start: 1
            grid-row-start: span 2
         .x-col-2
            grid-column-start: 2
            grid-row-start: 1
         .x-col-3
            grid-column-start: 2
            grid-row-start: 2
         .x-col-4
            grid-column-start: 3
            grid-row-start: 1
         .x-col-5
            grid-column-start: 3
            grid-row-start: 2
         .x-col-6
            grid-column-start: 1
            grid-row-start: 3
         .x-col-7
            grid-column-start: 1
            grid-row-start: 4
         .x-col-8
            grid-column-start: 2
            grid-row-start: 3
         .x-col-9
            grid-column-start: 2
            grid-row-start: 4
         .x-col-10
            grid-column-start: 3
            grid-row-start: 3
         .x-col-11
            grid-column-start: 3
            grid-row-start: 4
      .general-card
         background: #EFF3FC
         min-width: auto
         margin-right: 0

@media screen and (max-width: 767.98px)
   .front-page
      .grid
         grid-template-columns: repeat(2, 1fr)
         grid-row-gap: 0px
         .x-col-1
            grid-column-start: 1
            grid-row-start: span 2
         .x-col-2
            grid-column-start: 2
            grid-row-start: 1
         .x-col-3
            grid-column-start: 2
            grid-row-start: 2
         .x-col-4
            grid-column-start: 1
            grid-row-start: 3
         .x-col-5
            grid-column-start: 1
            grid-row-start: 4
         .x-col-6
            grid-column-start: 2
            grid-row-start: 3
         .x-col-7
            grid-column-start: 2
            grid-row-start: 4
         .x-col-8
            grid-column-start: 1
            grid-row-start: 5
         .x-col-9
            grid-column-start: 1
            grid-row-start: 6
         .x-col-10
            grid-column-start: 2
            grid-row-start: 5
         .x-col-11
            grid-column-start: 2
            grid-row-start: 6

@media screen and (max-width: 576.98px)
   .front-page
      .grid
         grid-template-columns: repeat(1, 1fr)
         grid-row-gap: 0px
         grid-auto-rows: 1fr 34px
         .x-col-1
            grid-column-start: 1
            grid-row-start: 1
         .x-col-2
            grid-column-start: 1
            grid-row-start: 2
         .x-col-3
            grid-column-start: 1
            grid-row-start: 3
         .x-col-4
            grid-column-start: 1
            grid-row-start: 4
         .x-col-5
            grid-column-start: 1
            grid-row-start: 5
         .x-col-6
            grid-column-start: 1
            grid-row-start: 6
         .x-col-7
            grid-column-start: 1
            grid-row-start: 7
         .x-col-8
            grid-column-start: 1
            grid-row-start: 8
         .x-col-9
            grid-column-start: 1
            grid-row-start: 9
         .x-col-10
            grid-column-start: 1
            grid-row-start: 10
         .x-col-11
            grid-column-start: 1
            grid-row-start: 11

Comments

[Сергей delphinpro]

Мрак... Посмотрите на grid-template-columns. В десяток строк кода уложитесь. Или даже в три. Там и без медизапросов можно соорудить.