I am trying to create a simple design using CSS grid, right now I'm learning how to use it and I want to create an article that contains and image to the left and the text content to right, this should be inverted for even Childs using nth-child(even). The thing is that I've created a grid of 12 columns and I assign grid-column: 2 / 13; to the text content while the img has a grid-column: 1 / 2, this way the image is to the left and the text in the right side looking good.
If I try to do the same but in the opposite way, I mean grid-column: 1 / 12; to the text and 12 / 13; to the image it arranges the elements correctly but at the same time creates a new row and the text appears on the bottom. I don't know what is happening and I hope you could help me. I'd really appreciate that. Thanks for yours answers.
* {
box-sizing: border-box;
}
body {
display: grid;
height: 100vh;
margin: 0;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px auto 100px;
grid-template-areas:
"h h h h h h h h h h h h"
"m m c c c c c c c c c c"
"m m c c c c c c c c c c";
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
img {
display: block;
}
.container {
border: 1px solid black;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8%;
grid-area: h;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header li {
display: inline;
margin: 0 10px;
}
aside {
grid-area: m;
padding: 20px;
}
main {
grid-area: c;
padding: 20px;
}
main > article {
margin-bottom: 30px;
}
article {
display: grid;
gap: 10px;
grid-template-columns: repeat(12, 1fr);
}
article .content {
grid-column: 2 / 13;
}
article .img-box {
grid-column: 1 / 2;
}
article:nth-child(2n) .content {
grid-column: 1 / 12;
}
article:nth-child(2n) .img-box {
grid-column: 12 / 13;
}
.table {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.table .cell {
border: 1px solid black;
}
.table .large-cell {
grid-row: 1 / -1;
}
.table #img-cell {
text-align: center;
}
.table #cell-1 {
grid-row: 2 / -1;
}<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Grid</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="container">
<img src="https://via.placeholder.com/50x50" alt="logo-img" />
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<aside class="container">
<div class="menu">
<h1>Menu</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</aside>
<main class="container">
<article>
<div class="img-box">
<img src="https://via.placeholder.com/300x200" alt="article-img" />
</div>
<div class="content">
<h2>Artículo 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas,
suscipit fugiat rem ipsa, eligendi odio iusto, temporibus error
tenetur illo nisi. Aliquam dolor labore aspernatur laborum
consequatur, reprehenderit cum necessitatibus dolorum autem
molestiae ex, commodi vel. Accusantium officiis necessitatibus,
error distinctio, ullam dolorem fugit dolor, modi quidem ipsum
rerum nobis!
</p>
</div>
</article>
<article>
<div class="img-box">
<img src="https://via.placeholder.com/300x200" alt="article-img" />
</div>
<div class="content">
<h2>Artículo 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas,
suscipit fugiat rem ipsa, eligendi odio iusto, temporibus error
tenetur illo nisi. Aliquam dolor labore aspernatur laborum
consequatur, reprehenderit cum necessitatibus dolorum autem
molestiae ex, commodi vel. Accusantium officiis necessitatibus,
error distinctio, ullam dolorem fugit dolor, modi quidem ipsum
rerum nobis!
</p>
</div>
</article>
<article>
<div class="img-box">
<img src="https://via.placeholder.com/300x200" alt="article-img" />
</div>
<div class="content">
<h2>Artículo 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto
consequatur atque quaerat architecto dignissimos, aliquid alias
cupiditate? Perferendis ipsum, ipsa sunt dolorum doloremque ex
cupiditate eos! Eaque esse possimus reprehenderit maxime, sequi vel
ut, fuga quo distinctio maiores earum debitis natus amet nulla
perspiciatis dolor, ex enim saepe necessitatibus adipisci.
</p>
</div>
</article>
<div class="table">
<div class="cell" id="img-cell">
<img src="https://via.placeholder.com/200x50" alt="" />
</div>
<div class="cell" id="cell-1">
<h2>Heading</h2>
<p>
Texto de bajada de contenido
</p>
</div>
<div class="cell large-cell" id="cell-2"></div>
<div class="cell large-cell" id="cell-3"></div>
</div>
</main>
</body>
</html>