Форум программистов
 
Регистрация на форуме тут, о проблемах пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме 15-35 тыс рублей в месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.09.2021, 13:57   #1
Krasi
Форумчанин
 
Регистрация: 12.02.2010
Сообщений: 725
По умолчанию Как правильно сверстать GRID

Я искал решение на Flex и Grid, мне было интересно, как сделать 3 независимых столбца на flexe и вставлять в каждый контент разной высоты, нашел вот это:
Безымянный11.jpg
На рисунке выше все смотрится хорошо, но если мы начнем изменять ширину браузера (я хочу адаптивный дизайн, чтобы в телефоне таблица становилась с одной ячейкой), появляется прокрутка по ширине и контент все равно остается по ширине на нескольких столбцах. На графики не смотрите, ширину и перерисовку просто не добавил.
Безымянный22.jpg
Что я делаю сейчас:
Код:
<style>
    .container { 
      display: grid; 
      grid-template-columns:  repeat(3, 1fr);  
      grid-template-rows: repeat(5, 150px); 
      background-color: none; 
      gap: 10px; 
      border-radius: 12px;
      margin: 10px 10px;
    }
    .container > div { 
      background: linear-gradient(140deg, rgba(255,255,240,.9), rgba(240,255,255,0.9));
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 6px;
      padding: 10px 17px;
    }
    #one { 
      grid-column: 2/4; 
      grid-row: 1/7;
      min-width: 350px;
    } 
    #two { 
     grid-column: 1/2; 
     grid-row: 1/3; 
    }
    #three { 
     grid-row: 3/5; 
    }
    #four { 
     grid-row: 5/7; 
    }
    
    #five {
        grid-column: 1/2; 
      grid-row: 7/9; 
    }   
    #seven { 
      grid-row: 1/7; 
    }
</style>
Код:
<div id="nine">Image Nine</div>
Может быть, тут можно добавить какой-то аттрибут типа переноса элементов на следующую строку при недостающей ширине браузера? Если вариант ну так себе - предложите хорошую идею, как иначе мне сделать то, что хочу.
Krasi вне форума Ответить с цитированием
Старый 27.09.2021, 20:18   #2
maks1331
Форумчанин
 
Аватар для maks1331
 
Регистрация: 20.12.2016
Сообщений: 121
По умолчанию

@media(max-width:тут пишем нужное значение + px){
.мой_класс{
сместись сюда;
}
.мой_класс_2{
А ты сюда;
}
}

Это самый что ни на есть хороший способ сделать сайт адаптивным
формошлеп.рф
maks1331 вне форума Ответить с цитированием
Ответ
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сверстать эти элементы? (flexbox) Krasi HTML и CSS 3 14.06.2021 13:19
Как сверстать input панель для iPhone? alexelev HTML и CSS 1 22.04.2014 18:20
Как сверстать border-radius в IE? zayabelka HTML и CSS 2 24.07.2012 08:06
Как сверстать такой блок Manonia HTML и CSS 10 19.02.2010 12:57
как создать grid? romets Win Api 12 24.01.2008 22:36