英文:
HTML Start new row every 2 articles
问题
你好，以下是翻译好的部分：
我有这个HTML / CSS代码用于一些卡片，问题是，我需要它们在每两个'article' 区域之后开始新的一行。如何实现这一点？
这导致了一个'articles'或卡片的单行。如何在每两个卡片之后开始新的一行？（文章数量将在短期内增加）
谢谢。
英文:
I have this HTML / CSS code for some cards, thing is, I need them to start a new row every two 'article' regions.
How can achieve this?
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.tiles_bodyLOB {
display: flex;
grid-template-columns: auto auto;
column-gap: 1rem;
row-gap: 1rem;
margin-top: 0.25rem;
@media (max-width: 700px) {
grid-template-columns: repeat(1, 1fr);
}
padding: 1rem;
border-radius: 8px;
justify-content: space-between;
}
.tilesLOB {
display: grid;
grid-template-columns: auto auto;
gap: 1rem;
@media (max-width: 700px) {
grid-template-columns: repeat(1, 1fr);
}
}
.tile-styleLOB {
background-color: red;
min-height: 200px;
transition: 0.25s ease;
&:hover {
transform: translateY(-5px);
}
&:focus-within {
box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
}
min-width: 600px;
}
.a-tag:link {
color: white;
}
.a-tag:hover {
color: white;
}
.a-tag:visited {
color: white;
}
<!-- language: lang-html -->
<div id="tile-container">
<div class="tiles_bodyLOB">
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1
00</span>&nbsp;&nbsp;&nbsp;
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1
00</span>&nbsp;&nbsp;&nbsp;
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1
00</span>&nbsp;&nbsp;&nbsp;
</div>
</a>
</article>
<!-- end snippet -->
This results into a single row of 'articles' or cards.
How can I start a new row every two cards? (the number of articles will increase in the short term)
Thanks
答案1
得分: 1
如果您想根据屏幕宽度包裹文章，则在CSS中向.tiles_bodyLOB添加flex-wrap: wrap;，如下所示：
.tiles_bodyLOB {
display: flex;
grid-template-columns: auto auto;
column-gap: 1rem;
row-gap: 1rem;
margin-top: 0.25rem;
@media (max-width: 700px) {
grid-template-columns: repeat(1, 1fr);
}
padding: 1rem;
border-radius: 8px;
justify-content: space-between;
flex-wrap: wrap;
}
在片段中的其他内容保持不变。点击片段中的“full page”以查看大屏幕上的包裹效果。
英文:
If you want to wrap the articles based on screen width then add flex-wrap: wrap; to .tiles_bodyLOB in the CSS, like this
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tiles_bodyLOB {
display: flex;
grid-template-columns: auto auto;
column-gap: 1rem;
row-gap: 1rem;
margin-top: 0.25rem;
@media (max-width: 700px) {
grid-template-columns: repeat(1, 1fr);
}
padding: 1rem;
border-radius: 8px;
justify-content: space-between;
flex-wrap: wrap;
}
.tilesLOB {
display: grid;
grid-template-columns: auto auto;
gap: 1rem;
@media (max-width: 700px) {
grid-template-columns: repeat(1, 1fr);
}
}
.tile-styleLOB {
background-color: red;
min-height: 200px;
transition: 0.25s ease;
&:hover {
transform: translateY(-5px);
}
&:focus-within {
box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
}
min-width: 600px;
}
.a-tag:link {color: white;}
.a-tag:hover {color: white;}
.a-tag:visited {color: white;}
<!-- language: lang-html -->
<div id="tile-container">
<div class="tiles_bodyLOB">
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1
00</span>&nbsp;&nbsp;&nbsp;
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1
00</span>&nbsp;&nbsp;&nbsp;
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1
00</span>&nbsp;&nbsp;&nbsp;
</div>
</a>
</article>
</div>
</div>
<!-- end snippet -->
Click full page in the snippet to see the warping on large screens.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论