与 css 网格并排的列
Columns side by side with css grid
我无法理解 CSS 网格的工作原理。
我想要3列与特定的宽度[=45=并排]和高度，但每列之间有一个间隙。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
}
.left {
grid-column: 1;
border: 1px solid red;
height: 500px;
width: 300px;
}
.middle {
grid-column: 2;
border: 1px solid red;
height: 500px;
width: 300px;
}
.right {
grid-column: 3;
border: 1px solid red;
height: 500px;
width: 300px;
}
<div class="grid-container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
我可以用什么方法来弥补这个差距？如果有人能向我解释如何减少 css 中的代码行，我将不胜感激，谢谢！
编辑
我是这样解决的
.wrapper{
display: grid;
place-items: center;
min-height: 100vh;
}
.grid-container{
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
width: 60vw;
height: 450px;
}
.left{
background-color: hsl(31, 77%, 52%);
grid-column: 1;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.middle{
background-color: hsl(184, 100%, 22%);
grid-column: 2;
}
.right{
background-color: hsl(179, 100%, 13%);
grid-column: 3;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<div class="wrapper">
<div class="grid-container">
<div class="left">
<img src="images/icon-sedans.svg" alt="sedans" class="logo">
<h2 class="text-title">Sedans</h2>
<div class="main-text">
Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
or on your next road trip.
</div>
<button class="btn">Learn More</button>
</div>
<div class="middle">
<img src="images/icon-suvs.svg" alt="sedans" class="logo">
<h2 class="text-title">Suvs</h2>
<div class="main-text">
Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
and off-road adventures.
</div>
<button class="btn">Learn More</button>
</div>
<div class="right">
<img src="images/icon-luxury.svg" alt="sedans" class="logo">
<h2 class="text-title">Luxury</h2>
<div class="main-text">
Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
rental and arrive in style.
</div>
<button class="btn">Learn More</button>
</div>
</div>
</div>
但现在我想做的是让这一切都具有响应性
您可以简单地在 grid-template-columns 属性 中指定您需要的宽度。列之间没有可见的间隙。
如果你想要红色边框，你可以为那些 div 指定一个通用的 class，并且只需执行一次。
.grid-container{
display: grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 1fr;
column-gap: 0;
height: 500px;
}
.left{
border: 1px solid red;
}
.middle{
border: 1px solid red;
}
.right{
border: 1px solid red;
}
<div class="grid-container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
在网格 parent 上指定宽度，移除 child 元素上的任何静态宽度。在 grid-template-columns: 1fr 1fr 1fr; 中设置分数后，每列将占据 parent 宽度的三分之一。因此，如果您的 parent 设置为 80 view width => 80% of the view port，那么您的列将分布在每个列宽度的三分之一以上。
如果你有 4 个项目，每个项目都设置为 1fr，那么它们将占 25%，5 个将占 20%，基本上 => children 个元素的数量/parents宽度.
.grid-container {
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
width: 80vw;
}
.left>ul {
height: 80%;
background: pink;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: space-between;
}
.left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid red;
grid-column: 1;
}
.middle {
padding: 5px;
grid-column: 2;
border: red solid 1px;
}
.middle span {
display: flex;
flex-direction: column;
justify-content: start;
padding: 5px;
grid-column: 2;
background: lightblue;
border-bottom: 1px solid black;
}
.right {
grid-column: 3;
border: 1px solid red;
padding: .2rem;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.row {
padding: 0 1rem;
display: flex;
justify-content: space-between;
align-items: start;
background: #EEE;
}
.right div:nth-of-type(2) {
color: #a2a2a2;
text-align: center;
}
<div class="grid-container">
<div class="left">Here is some content for column 1 with list items
<ul>
<li>
display: flex
</li>
<li>
flex-direction: column
</li>
<li>
justify-content: space-around
</li>
<li>
align-items: flex-start
</li>
</ul>
</div>
<div class="middle">
<span>This is inside a span tag</span>
<span>Parent has flex direction of column</span>
<span>Justify Content set at start</span>
<span>this is inside a span tag</span> More content for column 2. it is a bit longer than the first textual content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra pulvinar tincidunt. Nam consequat metus et cursus auctor.
Suspendisse posuere sem ut tortor lacinia, nec tempor turpis ultrices. Sed vitae gravida orci.</div>
<div class="right">
<div class="row">
<h3>Row</h3>
<h3>Space</h3>
<h3>Between</h3>
</div>
<span>Parents flex <span style="background: pink;">flex-direction </span> and <span style="background: pink;">display-flex</span> <b>flex</b> and <b>column</b></span></span>
<span>Parents flex <span style="background: pink;">justify-content</span> is set to <b>space-around</b></span>
<div>Good ole text-align: center... Vestibulum viverra pulvinar tincidunt. Nam consequat metus et cursus auctor. Suspendisse posuere sem ut tortor lacinia, nec tempor turpis ultrices.
</div>
</div>
</div>
垂直 居中文本的示例，flex-direction 设置为 列.
body {
margin: 0;
padding: 0;
}
.parent {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.child {
margin: 0 auto;
height: 200px;
width: calc(200px - 1rem);
background: lightblue;
display: flex;
flex-direction: column;
justify-content: center;
padding: .5rem;
}
<div class="parent">
<div class="child">Vertically centering using flex.
<br><br> Justify content when parents flex-direction is set to column, will center content vertically.</div>
</div>
我无法理解 CSS 网格的工作原理。
我想要3列与特定的宽度[=45=并排]和高度，但每列之间有一个间隙。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
}
.left {
grid-column: 1;
border: 1px solid red;
height: 500px;
width: 300px;
}
.middle {
grid-column: 2;
border: 1px solid red;
height: 500px;
width: 300px;
}
.right {
grid-column: 3;
border: 1px solid red;
height: 500px;
width: 300px;
}
<div class="grid-container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
我可以用什么方法来弥补这个差距？如果有人能向我解释如何减少 css 中的代码行，我将不胜感激，谢谢！
编辑
我是这样解决的
.wrapper{
display: grid;
place-items: center;
min-height: 100vh;
}
.grid-container{
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
width: 60vw;
height: 450px;
}
.left{
background-color: hsl(31, 77%, 52%);
grid-column: 1;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.middle{
background-color: hsl(184, 100%, 22%);
grid-column: 2;
}
.right{
background-color: hsl(179, 100%, 13%);
grid-column: 3;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<div class="wrapper">
<div class="grid-container">
<div class="left">
<img src="images/icon-sedans.svg" alt="sedans" class="logo">
<h2 class="text-title">Sedans</h2>
<div class="main-text">
Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
or on your next road trip.
</div>
<button class="btn">Learn More</button>
</div>
<div class="middle">
<img src="images/icon-suvs.svg" alt="sedans" class="logo">
<h2 class="text-title">Suvs</h2>
<div class="main-text">
Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
and off-road adventures.
</div>
<button class="btn">Learn More</button>
</div>
<div class="right">
<img src="images/icon-luxury.svg" alt="sedans" class="logo">
<h2 class="text-title">Luxury</h2>
<div class="main-text">
Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
rental and arrive in style.
</div>
<button class="btn">Learn More</button>
</div>
</div>
</div>
但现在我想做的是让这一切都具有响应性
您可以简单地在 grid-template-columns 属性 中指定您需要的宽度。列之间没有可见的间隙。
如果你想要红色边框，你可以为那些 div 指定一个通用的 class，并且只需执行一次。
.grid-container{
display: grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 1fr;
column-gap: 0;
height: 500px;
}
.left{
border: 1px solid red;
}
.middle{
border: 1px solid red;
}
.right{
border: 1px solid red;
}
<div class="grid-container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
在网格 parent 上指定宽度，移除 child 元素上的任何静态宽度。在 grid-template-columns: 1fr 1fr 1fr; 中设置分数后，每列将占据 parent 宽度的三分之一。因此，如果您的 parent 设置为 80 view width => 80% of the view port，那么您的列将分布在每个列宽度的三分之一以上。
如果你有 4 个项目，每个项目都设置为 1fr，那么它们将占 25%，5 个将占 20%，基本上 => children 个元素的数量/parents宽度.
.grid-container {
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
width: 80vw;
}
.left>ul {
height: 80%;
background: pink;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: space-between;
}
.left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid red;
grid-column: 1;
}
.middle {
padding: 5px;
grid-column: 2;
border: red solid 1px;
}
.middle span {
display: flex;
flex-direction: column;
justify-content: start;
padding: 5px;
grid-column: 2;
background: lightblue;
border-bottom: 1px solid black;
}
.right {
grid-column: 3;
border: 1px solid red;
padding: .2rem;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.row {
padding: 0 1rem;
display: flex;
justify-content: space-between;
align-items: start;
background: #EEE;
}
.right div:nth-of-type(2) {
color: #a2a2a2;
text-align: center;
}
<div class="grid-container">
<div class="left">Here is some content for column 1 with list items
<ul>
<li>
display: flex
</li>
<li>
flex-direction: column
</li>
<li>
justify-content: space-around
</li>
<li>
align-items: flex-start
</li>
</ul>
</div>
<div class="middle">
<span>This is inside a span tag</span>
<span>Parent has flex direction of column</span>
<span>Justify Content set at start</span>
<span>this is inside a span tag</span> More content for column 2. it is a bit longer than the first textual content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra pulvinar tincidunt. Nam consequat metus et cursus auctor.
Suspendisse posuere sem ut tortor lacinia, nec tempor turpis ultrices. Sed vitae gravida orci.</div>
<div class="right">
<div class="row">
<h3>Row</h3>
<h3>Space</h3>
<h3>Between</h3>
</div>
<span>Parents flex <span style="background: pink;">flex-direction </span> and <span style="background: pink;">display-flex</span> <b>flex</b> and <b>column</b></span></span>
<span>Parents flex <span style="background: pink;">justify-content</span> is set to <b>space-around</b></span>
<div>Good ole text-align: center... Vestibulum viverra pulvinar tincidunt. Nam consequat metus et cursus auctor. Suspendisse posuere sem ut tortor lacinia, nec tempor turpis ultrices.
</div>
</div>
</div>
垂直 居中文本的示例，flex-direction 设置为 列.
body {
margin: 0;
padding: 0;
}
.parent {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.child {
margin: 0 auto;
height: 200px;
width: calc(200px - 1rem);
background: lightblue;
display: flex;
flex-direction: column;
justify-content: center;
padding: .5rem;
}
<div class="parent">
<div class="child">Vertically centering using flex.
<br><br> Justify content when parents flex-direction is set to column, will center content vertically.</div>
</div>