Как использовать CSS для создания адаптивного макета сайта с тремя колонками?

Для создания адаптивного макета сайта с тремя колонками в CSS можно использовать, например, CSS Grid Layout. thecode.media skillbox.ru

Некоторые возможности:

• Свойство grid-template-columns. webcademy.ru В нём указывается размер каждой колонки через пробел. webcademy.ru Например, можно создать три колонки по 100 px каждая: grid-template-columns: 100px 100px 100px. webcademy.ru
• Свойство grid-template-rows. webcademy.ru Оно отвечает за ряды. webcademy.ru Можно задать высоту рядам по 100 px: grid-template-rows: 100px 100px 100px. webcademy.ru
• Свойства grid-column-gap и grid-row-gap. webcademy.ru Они помогают добавить пространство между колонками и рядами. webcademy.ru Эти свойства можно объединить в grid-gap: 20px 30px, где первое значение — отступ между рядами, а второе — между колонками. webcademy.ru
• Фракция (fr). skillbox.ru webcademy.ru Это специальная единица измерения CSS Grid для создания адаптивного макета. webcademy.ru Если определить три колонки шириной 1 фракция каждая (1fr), то колонки будут равномерно делить ширину экрана или свободного для них пространства и занимать по 1 части каждая. webcademy.ru
• Свойства auto-fill и auto-fit. thecode.media webcademy.ru Они позволяют автоматически создавать колонки или строки. thecode.media auto-fill создаёт колонки по размеру контейнера, даже если в них нет контента. thecode.media auto-fit подгоняет количество колонок под контент. thecode.media

Для правильного отображения макета на разных экранах можно использовать медиа-запросы и Bootstrap для контроля над расположением колонок. sky.pro

Важно тестировать макеты в разных браузерах и на разных устройствах. sky.pro