Jump to content

Slevin

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Slevin

  • Rank
    Newbie
  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...