Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
802 views
in Technique[技术] by (71.8m points)

css - How to get a grid-gap between the grid item and the container?

How can I get a left-sided gap? As you can see the Box1 is sitting 'sticky' to the left side I've used grid-gap: 1em; but it only applies to top bottom and right?

/*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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The grid-gap property applies only between grid items. It never applies between a grid item and the grid container.

If you want a gap between the item and the container, then use padding on the container.

.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(95px, auto);   
    grid-gap: 1em;
    padding: 1em; /* NEW */
}

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...