0
* {
margin: 0;
padding: 0;
}
.container {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template
}
header {
height: 100%;
width: 100%;
background-color: #28aadc;
border: 1px solid;
}
.header-fixedWidth {
height: 320px;
width: 90%;
border: 1px solid;
margin: 0 auto;
}
main {
background-color: white;
border: 1px solid;
}
.main-fixedWidth {
height: 100%;
min-height: 1000px;
margin: 0 auto;
width: 90%;
border: 1px solid;
}
@media screen and (min-width: 895px) {
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
grid-gap: 20px;
}
}
@media screen and (min-width: 988px) {
header {
max-width: 320px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Call Me Nick</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>
<div class="header-fixedWidth"></div>
</header>
<main>
<div class="main-fixedWidth"></div>
</main>
</div>
</body>
</html>I bastelt wurden mit dem CSS-Raster Zentrieren, und ich versuchte, ein Mock-up dieser website neu zu erstellen: http://mor10.com/
Beachten Sie, wie die linke Die Seitenleiste blieb in einer festen Breite, während die Anzahl der Spalten bei steigendem Hauptinhaltsbereich anstieg, ohne dass der Inhalt in die Mitte gezogen wurde.
Ich konnte die Grundlage dafür erstellen, aber während ich mein Browserfenster dehne, zieht der Hauptinhaltsbereich, anstatt sich zu strecken, zum anderen Ende des Bildschirms und hinterlässt diese große Lücke zwischen der Seitenleiste und sich selbst .
Kann mir jemand helfen, dies zu korrigieren?
