Hello to all,
can somebody tell me the right common way how to center a Grid itself within the viewport?
I've figured out 2 methods, but somehow both don't seem to me to be best practice.
The first one is using an empty first and last column like:
grid-template-areas: ". title navigation .";
When using grid-gap this method has the problem that when you resize the viewport to min-width the design gets a glitch cause the left gap will still be visible while on the right side the content starts to disappear.
The code for the upper example for testing:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="grid-container">
<div class="title">1 Title</div>
<div class="navigation">2 Navigation</div>
<div class="header">3 Header</div>
<div class="main">4 Main Article <br />....<br />....</div>
</div>
</body>
/* style.css */
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: minmax(360px, 100vw);
grid-template-rows: 30px 60px 30px auto;
grid-template-areas:
"title"
"navigation"
"header"
"main";
grid-row-gap: 5px;
}
@media screen and (min-width: 736px) {
.grid-container {
display: grid;
grid-template-rows: 30px 60px auto;
grid-template-columns: 1fr 500px 226px 1fr;
grid-template-areas:
". title navigation ."
". header header ."
". main main .";
grid-gap: 10px;
}
}
.grid-container > div { background-color: #999; }
.title { grid-area: title; }
.navigation { grid-area: navigation; }
.header { grid-area: header; }
.main { grid-area: main; }
The second way i found out would be using another Grip to center the main-Grip. Therefore I make the "body" itself a Grid and set the property "justify-content: center;" to it.
The CSS code for the second expample (HTML remains the same):
/* style.css */
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
display: grid;
justify-content: center;
}
.grid-container {
display: grid;
grid-template-columns: minmax(360px, 100vw);
grid-template-rows: 30px 60px 30px auto;
grid-template-areas:
"title"
"navigation"
"header"
"main";
grid-row-gap: 5px;
}
@media screen and (min-width: 736px) {
.grid-container {
display: grid;
grid-template-rows: 30px 60px auto;
grid-template-columns: 500px 226px;
grid-template-areas:
"title navigation"
"header header"
"main main";
grid-gap: 10px;
}
}
.grid-container > div { background-color: #999; }
.title { grid-area: title; }
.navigation { grid-area: navigation; }
.header { grid-area: header; }
.main { grid-area: main; }
I can't imagine there's no better solution to center a Grid. In the good old times you could center a DIV with "margin: 0 auto;", but adding this property to a Grind doesn't seem to do the magic I want.
I would be very happy if someone could find a better solution.
Many thanks in advance, Slevin
