simplify grid css syntax

This commit is contained in:
rhiannon morris 2023-08-06 06:12:10 +02:00
parent a79310c4ec
commit f40850cf38
4 changed files with 11 additions and 11 deletions

View file

@ -23,7 +23,7 @@
display: grid; display: grid;
grid-template-columns: 15% auto; grid-template-columns: 15% auto;
align-items: baseline; align-items: baseline;
grid-gap: 0.75em; gap: 0.75em;
} }
#filters h3 { #filters h3 {
@ -101,7 +101,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 0; margin-top: 0;
grid-gap: 2em; gap: 2em;
} }
#filterstuff li { #filterstuff li {
@ -138,7 +138,7 @@
#filterstuff { #filterstuff {
grid-area: unset; grid-area: unset;
flex-flow: column; flex-flow: column;
grid-gap: 0.2em; gap: 0.2em;
} }
#filterstuff li { #filterstuff li {
@ -150,8 +150,8 @@
.grid { .grid {
padding: 0; padding: 0;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, var(--image-size)); grid: auto-flow / repeat(auto-fit, var(--image-size));
grid-gap: var(--gap); gap: var(--gap);
justify-content: center; justify-content: center;
} }
@ -190,7 +190,7 @@
--gap: 0.2em; --gap: 0.2em;
display: grid; display: grid;
grid-template-columns: repeat(2, calc(50% - 3 * var(--gap))); grid-template-columns: repeat(2, calc(50% - 3 * var(--gap)));
grid-gap: var(--gap); gap: var(--gap);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;

View file

@ -67,7 +67,7 @@
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
padding: 0; padding: 0;
grid-gap: 1.5em; gap: 1.5em;
font-size: 175%; font-size: 175%;
} }
@ -93,7 +93,7 @@ main {
.list { .list {
font-size: 300%; font-size: 300%;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-gap: 1em; gap: 1em;
} }
} }

View file

@ -20,7 +20,7 @@
"icon text" "icon text"
"buttons buttons" "buttons buttons"
/ 1fr 3fr; / 1fr 3fr;
grid-gap: 0.5em; gap: 0.5em;
align-items: center; align-items: center;
min-height: 20vh; min-height: 20vh;

View file

@ -138,7 +138,7 @@
#updates dl { #updates dl {
display: grid; display: grid;
grid-template-columns: min-content auto; grid-template-columns: min-content auto;
grid-gap: 0.5em; gap: 0.5em;
align-items: baseline; align-items: baseline;
} }
@ -177,7 +177,7 @@ footer {
margin: 1.5em 0; margin: 1.5em 0;
text-align: center; text-align: center;
display: grid; display: grid;
grid-gap: 0.5em; gap: 0.5em;
grid-template-columns: minmax(auto, 10em) auto minmax(auto, 10em); grid-template-columns: minmax(auto, 10em) auto minmax(auto, 10em);
} }