[CSS 3] Gap
CSS Gap
2023-09-14 09:00:42 时间
The gap property in CSS is a shorthand for row-gap
and column-gap
, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts.
Previously, gap is only available for grid layout, now it is landing for flexbox as well;
/* Grid layout */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 2fr 1fr;
gap: 30px 20px;
}
/* Flex layout */
.container {
display: flex;
gap: 10%;
}
/* Multi-column layout */
.container {
column-count: 5;
gap: 20px;
}
Syntax:
.container {
gap: 1rem;
/* Is equivalent to:
* row-gap: 1rem;
* column-gap: 1rem
*/
gap: 10px 15%;
/* Is equivalent to:
* row-gap: 10px;
* column-gap: 15%;
*/
}
相关文章
- 前端每日实战:133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画
- 用纯CSS美化radio和checkbox
- 【二次元的CSS】—— 用 DIV + CSS3 画大白(详解步骤)
- 前端学习 -- Css -- 选择器的优先级
- [CSS] Purgecss to remove unused css
- [HTML5] Avoiding CSS Conflicts via Shadow DOM CSS encapsulation
- uni-app:template、js、css中判断平台(hbuilderx 3.6.18)
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- reactjs antd(ant-design)安装、基本使用及css样式的按需引入
- CSS Flex 布局的 flex-direction 属性讲解
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05