Как я могу центрировать элементы списка в классе списка (он определяется как сетка). Я пытался использовать поля, justify-items: center и добавлять / удалять поля в каждом классе css безрезультатно.
Gridbyexample - это учебный веб-сайт, которым я пользуюсь, но он не очень полезен, когда он приходит к этой конкретной ситуации. Любые идеи о том, как go об этом, используя методологию CSS Grid? Я пытаюсь использовать только эту методологию, поскольку это новый стандарт, который внедряется. в конечном итоге я пытаюсь создать веб-сайт с минимальной зависимостью от 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;
}
}