Question

如何获得左侧差距？你可以看到Box1在左侧是“粘性的”我使用了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>

https://jsfiddle.net/ZanicL3/Ldtcqdtb/

Answer 1

grid-gap属性仅适用于网格项。它永远不会应用于网格项和网格容器之间。

如果您想在商品和容器之间留一个间隙，请在容器上使用import UIKit class CustomView: UIView { override var intrinsicContentSize: CGSize { return CGSize(width: 100, height: 100) } } class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let newView = CustomView() newView.backgroundColor = UIColor.red newView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(newView) let horizontalConstraint = newView.centerXAnchor.constraint(equalTo: view.centerXAnchor) let verticalConstraint = newView.centerYAnchor.constraint(equalTo: view.centerYAnchor) NSLayoutConstraint.activate([horizontalConstraint, verticalConstraint]) } }。

padding

https://jsfiddle.net/Ldtcqdtb/3/

Answer 2

这是一种替代方法，允许您使用折叠轨迹将网格（或柔性）间隙应用到对象的“外部”。

这种方法非常适用于父元素可能并不总是相同的动态内容，提供了一个强大的单一属性来设置边距/装订线。

编辑：下面的示例演示了一个显式网格，但是当结合使用 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>

如何在网格项和容器之间找到网格间隙？

2 个答案: