How to center a GRID itself?

Slevin · May 13, 2019

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

ishan_shah · September 19, 2019

Hi @Slevin,

According to me you should try following code. It will work as per your requirement. You just have to add following item into your CSS.

justify-items: center;

Sign In

How to center a GRID itself?

Recommended Posts

Slevin

Link to comment

Share on other sites

ishan_shah

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity