After getting to grips with flexbox, I've started learning CSS grid.
Here's a simple flexbox grid that I've built before:
.container {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.flex {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 24px;
flex: 1;
}
.flex:nth-child(even) {
flex-flow: row-reverse wrap;
text-align: left;
}
img {
height: auto;
max-width: 100%;
}
<div class="container">
<div class="flex">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .flex -->
<div class="flex">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .flex -->
<div class="flex">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .flex -->
</div><!-- .container -->
As you can see, the image alternates using flex-flow: row-reverse wrap;
.
My question: Is it possible to do the same thing using CSS grid? How would I achieve this?
Here's how it's looking in CSS grid so far. Any ideas?
.container {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.col {
padding: 24px;
}
img {
height: auto;
max-width: 100%;
}
<div class="container">
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
</div><!-- .container -->
You have 2 elements so simply change the order of one element.
.container {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.col {
padding: 24px;
}
img {
height: auto;
max-width: 100%;
}
.grid:nth-child(even) .col:last-child {
order:-1;
}
<div class="container">
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
</div><!-- .container -->
You can also do the same with flexbox:
.container {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 24px;
flex: 1;
}
img {
height: auto;
max-width: 100%;
}
.grid:nth-child(even) .col:last-child {
order:-1;
}
<div class="container">
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
<div class="grid">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .grid -->
</div><!-- .container -->