CSS | свойство grid-column-gap
Опубликовано: 3 Февраля, 2022
Свойство grid-column-gap в CSS используется для установки размера зазора между столбцами в макете сетки.
Синтаксис:
сетка-столбец-разрыв: нет | длина | начальная | наследование;
Стоимость недвижимости:
- none: используется для установки свойства grid-column-gap в значение по умолчанию. Значение по умолчанию для grid-column-gap равно 0.
- длина: размер промежутка между столбцами указывается в единицах длины. Значение длины может быть в формате pf px, em и т. Д. Значение должно быть неотрицательным.
- initial: используется для установки свойства grid-column-gap в значение по умолчанию.
- наследовать: это свойство наследуется от своего родителя.
Example 1:
<!DOCTYPE html> < html > < head > < title > CSS grid-column-gap Property </ title > < style > .main { display: grid; grid-template-columns: auto auto auto; /* CSS property used here */ grid-column-gap: 20px; grid-row-gap: 20px; background-color: green; padding: 30px; } .main > div { background-color: white; text-align: center; padding: 15px; font-size: 25px; } </ style > </ head > < body > < div class = "main" > < div >G</ div > < div >E</ div > < div >E</ div > < div >K</ div > < div >S</ div > </ div > </ body > </ html > |
Выход:
Example 2: This example describes default grid-column-gap property.
<!DOCTYPE html> < html > < head > < title > CSS grid-column-gap Property </ title > < style > .main { display: grid; grid-template-columns: auto auto auto; /* CSS property used here */ grid-column-gap: initial; grid-row-gap: 20px; background-color: green; padding: 30px; } .main > div { background-color: white; text-align: center; padding: 15px; font-size: 25px; } </ style > </ head > < body > < div class = "main" > < div >G</ div > < div >E</ div > < div >E</ div > < div >K</ div > < div >S</ div > </ div > </ body > </ html > |
Выход:
Поддерживаемые браузеры: браузеры, поддерживаемые свойством CSS grid-column-gap , перечислены ниже:
- Google Chrome 57.0
- Safari 10.0
- Opera 44.0
- Firefox 52.0
- Internet Explorer 16.0