I have setup a grid system and they are almost behaving as expected.
The problem is there is a big gab between the columns
I tried setting the grid-column-gap but it seems unresponsive. Note that im using scss, though i tried changing it back to css but that gave the same result.
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 1rem; grid-gap: 1rem; justify-items: center; .language { width: 360px; height: 150px; border: 1px solid rgb(214, 214, 214); background: white; padding: 1rem; text-align: left; border-radius: 10px; cursor: pointer; color: black; box-shadow: 2px 1px 1px 1px rgb(228, 228, 228); } p { color: red; } }
<template> <div class="container"> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> </div> </template>
As commented by Niet the dark Absol.
The whole container is 100% width by default, and so the columns each take a third of the full width available. However, the items within have a fixed width, so you have a large gap. – Niet the Dark Absol 54 mins ago
Simply by putting a width to my container fixed it.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1rem;
grid-gap: 1rem;
width: 70%;
justify-items: center;
.language {
width: 360px;
height: 150px;
border: 1px solid rgb(214, 214, 214);
background: white;
padding: 1rem;
text-align: left;
border-radius: 10px;
cursor: pointer;
color: black;
box-shadow: 2px 1px 1px 1px rgb(228, 228, 228);
}
p {
color: red;
}
Try this:
grid-template-columns: repeat(3, 0fr);
Now you can adjust the gap with this:
grid-gap: 10px;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.