【发布时间】：2021-07-12 12:47:02
【问题描述】：
我是一个完全的菜鸟，正在学习 CSS GRID。我正在尝试创建一个 2 列卡。第一列有一个带有背景图像的空 DIV，第二列有一些文本。当我尝试分配列轨道以仅使用 CSS 反转两列时，问题就出现了。我想首先是文本列，然后是图像列。出于某种原因，它的创建和额外的行。它在第 1 列上方留有一个空格，在第 2 列图像下方留有一个空格。有人可以解释一下发生了什么吗？下面是我的代码笔。提前致谢。
<body>
<div class="container">
<div class="card">
<div class="cover-image">
<div class="color-overlay"></div>
</div>
<div class="content">
<h1>Get <span class="highlight">insights</span> that help your business grow.</h1>
<p class="description">Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.</p>
<ul class="benefit-container">
<li>
<p class="number">10k+</p>
<p>COMPANIES</p>
</li>
<li>
<p class="number">314</p>
<p>TEMPLATES</p>
</li>
<li>
<p class="number">12M+</p>
<p>QUERIES</p>
</li>
</ul>
</div>
</div>
</div>
</body>
/* GLOBAL STYLES */
* {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
/* COLOR SWATCHES */
:root {
--dark-blue: hsl(233, 47%, 7%);
--desaturated-blue: hsl(244, 38%, 16%);
--soft-violet: hsl(277, 64%, 61%);
--white: hsl(0, 0%, 100%);
--paragraph-white: hsla(0, 0%, 100%, 0.75);
--headings-white:hsla(0, 0%, 100%, 0.6);
}
/* GENERAL */
body {
background-color: var(--dark-blue);
}
.container {
max-width: 1110px;
margin: 0 auto;
}
/* CONTENT */
.card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 400px;
}
.cover-image {
background-image: url(https://64.media.tumblr.com/b9a4ac06954b37ce1154a64744b408b2/tumblr_nl3x1k11kS1up9ojio1_1280.jpg);
background-size:cover;
background-repeat: no-repeat;
height: 400px;
}
.cover-image {
grid-column: 2/3;
position: relative;
}
.color-overlay {
background-color: var(--soft-violet);
position: absolute;
height: 100%;
width: 100%;
mix-blend-mode: color;
opacity: .7;
}
.content {
grid-column: 1/2;
}
【问题讨论】：