CSS grid container example

CSS:

.wpcodebook-grid-container {
	display: grid;
	grid-template-columns: 100%;
}

@media only screen and (min-width: 768px) {
	.wpcodebook-grid-container {
		grid-template-columns: 50% 50%;
	}
}

HTML:

<div class="wpcodebook-grid-container">

	<div><img src="https://example.com/example1.jpg"></div>
	<div>Example #1 description.</div>

	<div><img src="https://example.com/example2.jpg"></div>
	<div>Example #2 description.</div>

	<div><img src="https://example.com/example3.jpg"></div>
	<div>Example #3 description.</div>

	<div><img src="https://example.com/example4.jpg"></div>
	<div>Example #4 description.</div>

</div>

Leave a Comment