How to center a list item within a CSS Grid (New method)

Question

How can I center the list items within the listing class (it is being defined as a grid). I have tried using margins, justify-items: center, and adding/removing margins on each css class to no avail.

Gridbyexample is the tutorial website that I have been using but its not very helpful when it comes to this particular situation. Any ideas on how to go about this using the CSS Grid methodology? I am trying to use only this methodology since it is a new standard that is being implemented. ultimately I am trying to build a website that has minimal reliance on javascript.

INDEX.HTML:

<html lang="en">
<div class="grid">
    <head class="main-head">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Fast Websites</title>
    </head>

    <nav class="main-nav">
        <ul>
            <li><a href="">Nav 1</a></li>
            <li><a href="">Nav 2</a></li>
            <li><a href="">Nav 3</a></li>
        </ul>
    </nav>

    <body>
        <article class="post">
        <h1>Built solely on HTML and CSS</h1>  
        <p>Welcome to my blog. This is my attempt to create a blog type platform that relies </p>

        <h1>Second Paragraph</h1>  
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        </article>

        <ul class="listing">
            <li>
              <h2>Item One</h2>
              <div class="body"><p>The content of this listing item goes here.</p></div>
              <div class="cta"><a href="">Call to action!</a></div>
            </li>
             <li>
               <h2>Item Two</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
             </li>
             <li class="wide">
               <h2>Item Three</h2>
               <div class="body"><p>The content of this listing item goes here.</p> 
               <p>This one has more text than the other items.</p>
               <p>Quite a lot more</p>
               <p>Perhaps we could do something different with it?</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
              </li>
              <li>
               <h2>Item Four</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
              </li>
               <li>
               <h2>Item Five</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
                <div class="cta"><a href="">Call to action!</a></div>
              </li>
          </ul>


    <div class="ad">Advertising</div>
    <footer class="main-footer">The footer</footer>
</div>
</body>
</html>

**STYLES.CSS**


*{box-sizing: border-box;}

.main-head {grid-area: header;}
.post {grid-area: post;}
.listing {grid-area: listing;}
.main-nav {grid-area: nav;}
.ad {grid-area: ad;}
.main-footer {grid-area: footer;}

.grid {
    display: grid;
    grid-gap: 2em;
    grid-template-areas: 
    "header"
    "nav"
    "post"
    "listing"
    "ad"
    "footer";
    grid-template-rows: 200px;
    grid-auto-rows: auto;
    background-color: lightseagreen;
}

.post {
    background-color: lightpink;
    text-align: center;
}

.listing {
    background-color: red;
    display: grid;
    list-style: none;
    margin: 2em;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
  }

  .listing li {
    background-color: lightgrey;
    border: 1px solid #ffe066;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

  }
  .listing .cta {
    margin-top: auto;
    border-top: 1px solid #ffe066;
    padding: 10px;
    text-align: center;
  }
  .listing .body {
    padding: 10px;
  }

code{background-color: lightgray;}

@media (min-width: 550px) {
    .grid {
      grid-template-columns: 1fr 3fr;
      grid-template-areas: 
        "header     header"
        "nav        nav"
        "post       post"
        "listing    listing"
        "ad         ad"
        "footer     footer";
    }
    nav ul {
      display: flex;
      justify-content: space-between;
    }
  }

  @media (min-width: 700px) {
    .grid {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "header     header      header"
        "nav        nav         nav"
        "ad         ad          ad"
        "post       post        post"
        "listing    listing     listing"
        "footer     footer      footer";
     }
     nav ul {
       flex-direction: column;
     }
  }

Answer 1

You could just put the list into a <div></div> and then just use: align-items:center . This should allow you to do as you require. Hope this helps?

How to center a list item within a CSS Grid (New method)

Question

1 answers

solution1
0 2020-04-07 03:30:18

How to center a list item within a CSS Grid (New method)

Question

1 answers

solution1 0 2020-04-07 03:30:18

solution1
0 2020-04-07 03:30:18