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><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><linkrel="stylesheet"href="style.css"/></head><body><divclass="grid-container"><divclass="title">1 Title</div><divclass="navigation">2 Navigation</div><divclass="header">3 Header</div><divclass="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:30px60px30px 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:30px60px auto;grid-template-columns:1fr500px226px1fr;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):
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.
How to center a GRID itself?
in CSS
Posted
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:
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:
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):
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