如何在网格项和容器之间获得网格间隙?
How to get a grid-gap between the grid item and the container?
如何获得左侧间隙?如您所见,Box1 位于左侧 'sticky' 我使用 grid-gap: 1em;
但它仅适用于顶部底部和右侧?
/*Defining the font and pixels so we can work with em later*/
body {
font-family: 'Poppins', sans-serif;
font-size: 25px;
}
/*BG gradient layer + bg elements*/
.BG_gradient {
background-image: linear-gradient(-135deg, #FEE140 0%, #FA709A 100%);
/*Padding = 10vh top + 10vh bottom = 20vh*/
padding: 10vh 5vh 10vh 5vh;
/*Padding top and bottom is already 20vh combined so height left is 70vh*/
height: 80vh;
}
/* wrapper of the content*/
.wrapper {
/*Here we define the start of the grid*/
display: grid;
/*This means left colom is 1fr, middle 2fr, and right 1fr so total it's 4fr*/
grid-template-columns: 1fr 2fr 1fr;
/*Rows = vertical so min it should be 95px atleast and max it's on auto*/
grid-auto-rows: minmax(95px, auto);
grid-gap: 1em;
/* BG visuals: */
background: #EEF3F4;
box-shadow: 0 0 90px 0 rgba(0,0,0,0.10);
border-radius: 15px;
height: 500px;
}
.header {
grid-column: 4/4;
}
.left {
background-color: rgba(230,45,45,0.50);
}
.middle {
background-color: rgba(50,115,180,0.50);
}
.right {
background-color: rgba(120,230,45,0.50);
}
<div class="BG_gradient">
<div class="wrapper">
<section class="header"></section>
<section class="mainbox left">Box 1</section>
<section class="mainbox middle">Box 2</section>
<section class="mainbox right">Box 3</section>
</div>
</div>
grid-gap
属性 仅适用于网格项之间。它从不应用于网格项和网格容器之间。
如果您想要物品和容器之间有间隙,请在容器上使用 padding
。
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(95px, auto);
grid-gap: 1em;
padding: 1em; /* NEW */
}
这是一种替代方法,允许您使用折叠轨道将网格(或弹性)间隙应用到对象的 'outer'。
此方法非常适合父元素可能不总是相同的动态内容,提供强大的单一 属性 来设置 margins/gutters。
编辑:以下示例演示了一个显式网格,但是当结合使用 grid-row-start/end grid-column-start/end 属性时,相同的方法可用于隐式网格。
.parent {
display: grid;
grid: 0 repeat(3, auto) 0 / 0 repeat(3, auto) 0;
grid-template-areas: " . . . . . "
" . a b c . "
" . d e f . "
" . g h i . "
" . . . . . ";
gap: 0.5em;
width: 100%;
height: 100vh;
background: #ddd;
}
.child {
grid-area: var(--position);
width: 100%;
height: 100%;
background: #fff;
}
body {
margin: 0;
}
<div class="parent">
<div class="child" style="--position: a;"></div>
<div class="child" style="--position: b;"></div>
<div class="child" style="--position: c;"></div>
<div class="child" style="--position: d;"></div>
<div class="child" style="--position: e;"></div>
<div class="child" style="--position: f;"></div>
<div class="child" style="--position: g;"></div>
<div class="child" style="--position: h;"></div>
<div class="child" style="--position: i;"></div>
</div>
如何获得左侧间隙?如您所见,Box1 位于左侧 'sticky' 我使用 grid-gap: 1em;
但它仅适用于顶部底部和右侧?
/*Defining the font and pixels so we can work with em later*/
body {
font-family: 'Poppins', sans-serif;
font-size: 25px;
}
/*BG gradient layer + bg elements*/
.BG_gradient {
background-image: linear-gradient(-135deg, #FEE140 0%, #FA709A 100%);
/*Padding = 10vh top + 10vh bottom = 20vh*/
padding: 10vh 5vh 10vh 5vh;
/*Padding top and bottom is already 20vh combined so height left is 70vh*/
height: 80vh;
}
/* wrapper of the content*/
.wrapper {
/*Here we define the start of the grid*/
display: grid;
/*This means left colom is 1fr, middle 2fr, and right 1fr so total it's 4fr*/
grid-template-columns: 1fr 2fr 1fr;
/*Rows = vertical so min it should be 95px atleast and max it's on auto*/
grid-auto-rows: minmax(95px, auto);
grid-gap: 1em;
/* BG visuals: */
background: #EEF3F4;
box-shadow: 0 0 90px 0 rgba(0,0,0,0.10);
border-radius: 15px;
height: 500px;
}
.header {
grid-column: 4/4;
}
.left {
background-color: rgba(230,45,45,0.50);
}
.middle {
background-color: rgba(50,115,180,0.50);
}
.right {
background-color: rgba(120,230,45,0.50);
}
<div class="BG_gradient">
<div class="wrapper">
<section class="header"></section>
<section class="mainbox left">Box 1</section>
<section class="mainbox middle">Box 2</section>
<section class="mainbox right">Box 3</section>
</div>
</div>
grid-gap
属性 仅适用于网格项之间。它从不应用于网格项和网格容器之间。
如果您想要物品和容器之间有间隙,请在容器上使用 padding
。
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(95px, auto);
grid-gap: 1em;
padding: 1em; /* NEW */
}
这是一种替代方法,允许您使用折叠轨道将网格(或弹性)间隙应用到对象的 'outer'。
此方法非常适合父元素可能不总是相同的动态内容,提供强大的单一 属性 来设置 margins/gutters。
编辑:以下示例演示了一个显式网格,但是当结合使用 grid-row-start/end grid-column-start/end 属性时,相同的方法可用于隐式网格。
.parent {
display: grid;
grid: 0 repeat(3, auto) 0 / 0 repeat(3, auto) 0;
grid-template-areas: " . . . . . "
" . a b c . "
" . d e f . "
" . g h i . "
" . . . . . ";
gap: 0.5em;
width: 100%;
height: 100vh;
background: #ddd;
}
.child {
grid-area: var(--position);
width: 100%;
height: 100%;
background: #fff;
}
body {
margin: 0;
}
<div class="parent">
<div class="child" style="--position: a;"></div>
<div class="child" style="--position: b;"></div>
<div class="child" style="--position: c;"></div>
<div class="child" style="--position: d;"></div>
<div class="child" style="--position: e;"></div>
<div class="child" style="--position: f;"></div>
<div class="child" style="--position: g;"></div>
<div class="child" style="--position: h;"></div>
<div class="child" style="--position: i;"></div>
</div>