Keeping 3 cards in same row using grid - html

Question

I created a list of cards using grid. The CSS:
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid > article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
The HTML:
<div id="app" class="container">
<div class="grid">
<article v-for="tool in tools">
<div class="title">
<h3>{{capitalizeFirstLetter(tool.name)}}</h3>
</div>
<div class="description">
{{tool.description}}
</div>
</article>
</div>
</div>
How do I keep up to 3 cards per row? I can't seem to understand how should I treat the grid so I will keep maximum 3 cards per row. For example I have 8 elements, then It will be:
card card card
card card card
card card

Answer 1

Change grid-template-columns property auto-fill to 3.
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid>article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid>article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
<div id="app" class="container">
<div class="grid">
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
</div>
</div>