Jump to content

Slevin

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by Slevin

  1. 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

×
×
  • Create New...