Jump to content
Sign in to follow this  
Slevin

How to center a GRID itself?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...