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?
This is my HTML:
<div id="tile-container">
<div class="tiles_bodyLOB">
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span> Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span> Case A: 1
00</span>
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span> Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span> Case A: 1
00</span>
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span> Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span> Case A: 1
00</span>
</div>
</a>
</article>
And my 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;}
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
>Solution :
If you want to wrap the articles based on screen width then add flex-wrap: wrap; to .tiles_bodyLOB in the CSS, like this
.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;}<div id="tile-container">
<div class="tiles_bodyLOB">
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span> Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span> Case A: 1
00</span>
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span> Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span> Case A: 1
00</span>
</div>
</a>
</article>
<article class="tile-styleLOB">
<h1 style="color: white; font-size: 38px;">
<span> Some Text ABC</span>
</h1>
<span style="color: white; font-size: 24px">
Sub Text 1
</span>
<a href="#">
<div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
<span> Case A: 1
00</span>
</div>
</a>
</article>
</div>
</div>Click full page in the snippet to see the warping on large screens.