Template:Etusivu/styles.css: Difference between revisions
From kubu
Jump to navigationJump to search
Erland changed the content model of the page Etusivu/styles.css from "wikitext" to "CSS" |
No edit summary |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.container { display: grid; | .container { | ||
display: grid; | |||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
grid-template-rows: auto auto auto; | grid-template-rows: auto auto auto auto auto; | ||
gap: | gap: 1em 1em; | ||
grid-auto-flow: row; | grid-auto-flow: row; | ||
grid-template-areas: | grid-template-areas: | ||
" | "square1A square1B" | ||
" | "square2A square2B" | ||
" | "square3A square3B"; | ||
width:100%; | |||
} | } | ||
. | .square1A { grid-area: square1A; } | ||
.square1B { grid-area: square1B; } | |||
. | .square2A { grid-area: square2A; } | ||
.square2B { grid-area: square2B; } | |||
.square3A { grid-area: square3A; } | |||
.square3B { grid-area: square3B; } | |||
.container > div { | |||
background-color: #bfedff; /*#00b7ff40;*/ | |||
border: 1px solid #00b7ff; | |||
border-radius: 10px; | |||
padding: 1em; | |||
padding-top: 0; | |||
} | |||
@media (max-width: 900px) { | |||
.container { | |||
grid-template-columns: 1fr; | |||
grid-template-areas: | |||
"square1A" | |||
"square1B" | |||
"square2A" | |||
"square2B" | |||
"square3A" | |||
"square3B"; | |||
} | |||
} | |||
Latest revision as of 10:53, 5 August 2024
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto auto;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas:
"square1A square1B"
"square2A square2B"
"square3A square3B";
width:100%;
}
.square1A { grid-area: square1A; }
.square1B { grid-area: square1B; }
.square2A { grid-area: square2A; }
.square2B { grid-area: square2B; }
.square3A { grid-area: square3A; }
.square3B { grid-area: square3B; }
.container > div {
background-color: #bfedff; /*#00b7ff40;*/
border: 1px solid #00b7ff;
border-radius: 10px;
padding: 1em;
padding-top: 0;
}
@media (max-width: 900px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"square1A"
"square1B"
"square2A"
"square2B"
"square3A"
"square3B";
}
}