Template:Etusivu/styles.css: Difference between revisions
From kubu
Jump to navigationJump to search
No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.container { | .container { | ||
display: grid; | display: grid; | ||
| Line 7: | Line 6: | ||
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 { | .container > div { | ||
background-color: #bfedff; /*#00b7ff40;*/ | background-color: #bfedff; /*#00b7ff40;*/ | ||
| Line 21: | Line 23: | ||
border-radius: 10px; | border-radius: 10px; | ||
padding: 1em; | padding: 1em; | ||
padding-top: 0; | |||
} | } | ||
@media (max-width: | @media (max-width: 900px) { | ||
.container { | .container { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
grid-template-areas: | 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";
}
}