.grid-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&.grid-with-gap {
--gap: 1em;
& .grid-col,
& [class^="grid-col-"],
& [class*=" grid-col-"] {
box-sizing: border-box;
&:not(:last-of-type) {
padding-right: calc(var(--gap) / 2);
}
&:not(:first-of-type) {
padding-left: calc(var(--gap) / 2);
}
}
}
}
.grid-col {
flex: 1 0 0%;
}
[class^="grid-col-"] {
flex: 0 0 auto;
}
.grid-col-auto {
width: auto;
}
.grid-col-1 {
width: 10%;
}
.grid-col-2 {
width: 20%;
}
.grid-col-3 {
width: 30%;
}
.grid-col-4 {
width: 40%;
}
.grid-col-5 {
width: 50%;
}
.grid-col-6 {
width: 60%;
}
.grid-col-7 {
width: 70%;
}
.grid-col-8 {
width: 80%;
}
.grid-col-9 {
width: 90%;
}
.grid-col-10 {
width: 100%;
}
@media (min-width: 768px) {
.grid-col-md {
flex: 1 0 0%;
}
.grid-col-md-auto {
width: auto;
}
.grid-col-md-1 {
width: 10%;
}
.grid-col-md-2 {
width: 20%;
}
.grid-col-md-3 {
width: 30%;
}
.grid-col-md-4 {
width: 40%;
}
.grid-col-md-5 {
width: 50%;
}
.grid-col-md-6 {
width: 60%;
}
.grid-col-md-7 {
width: 70%;
}
.grid-col-md-8 {
width: 80%;
}
.grid-col-md-9 {
width: 90%;
}
.grid-col-md-10 {
width: 100%;
}
}
@media (min-width: 960px) {
.grid-col-lg {
flex: 1 0 0%;
}
.grid-col-lg-auto {
width: auto;
}
.grid-col-lg-1 {
width: 10%;
}
.grid-col-lg-2 {
width: 20%;
}
.grid-col-lg-3 {
width: 30%;
}
.grid-col-lg-4 {
width: 40%;
}
.grid-col-lg-5 {
width: 50%;
}
.grid-col-lg-6 {
width: 60%;
}
.grid-col-lg-7 {
width: 70%;
}
.grid-col-lg-8 {
width: 80%;
}
.grid-col-lg-9 {
width: 90%;
}
.grid-col-lg-10 {
width: 100%;
}
}