No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
html { | html, body { | ||
height: 100%; | |||
margin: 0; | |||
padding: 0; | |||
background-color: black; | background-color: black; | ||
color: white; | |||
} | } | ||
body { | body { | ||
display: flex; | |||
justify-content: center; | |||
} | } | ||
#content { | #content { | ||
background-color: black; | background-color: black; | ||
display: grid; | display: grid; | ||
grid-template-columns: 250px 1fr; | grid-template-columns: 250px 1fr; | ||
| Line 20: | Line 21: | ||
"sidebar main" | "sidebar main" | ||
"sidebar footer"; | "sidebar footer"; | ||
width: 80%; /* Adjust this value to control the width */ | |||
max-width: 1200px; /* Optional: set a maximum width */ | |||
min-height: 100vh; | |||
} | } | ||
Revision as of 22:28, 14 December 2024
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
color: white;
}
body {
display: flex;
justify-content: center;
}
#content {
background-color: black;
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas:
"sidebar main"
"sidebar footer";
width: 80%; /* Adjust this value to control the width */
max-width: 1200px; /* Optional: set a maximum width */
min-height: 100vh;
}
#top {
grid-area: sidebar;
padding: 20px;
border: 2px solid magenta;
margin: 10px;
}
#article {
grid-area: main;
padding: 20px;
border: 2px solid magenta;
margin: 10px;
}
#footer {
grid-area: footer;
border: 2px solid magenta;
padding: 20px;
text-align: center;
margin: 10px;
}