Create two columns within a column debut theme

Highlighted
New Member
1 0 0

Hello,

I am trying to create a two column image with text layout.  The first column would hold one image with text. The second column would be of equal size, but hold 4 images with text - 2 on the first row and 2 on the second row. 

Thanks for your help.

0 Likes
Highlighted

Hi there,
Jack from OpenThinking here!

Here's a simple grid skeleton that achieves what you're asking.

HTML:

<div class="grid-container">
	<div class="one">
		<img src="https://picsum.photos/200" alt="">
		<h1>Image with text</h1>
	</div>
	<div class="two">
		<div class="inside-grid-container">
			<div class="st1">
				<img src="https://picsum.photos/200" alt="">
				<p>Image with text</p>
			</div>
			<div class="nd2">
				<img src="https://picsum.photos/200" alt="">
				<p>Image with text</p>
			</div>
			<div class="rd3">
				<img src="https://picsum.photos/200" alt="">
				<p>Image with text</p>
			</div>
			<div class="th4">
				<img src="https://picsum.photos/200" alt="">
				<p>Image with text</p>
			</div>
		</div>
	</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "one two";
}
.one { grid-area: one; }
.two { grid-area: two; }

.inside-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "st1 nd2"
    "rd3 th4";
}
.st1 { grid-area: st1; }
.nd2 { grid-area: nd2; }
.rd3 { grid-area: rd3; }
.th4 { grid-area: th4; }



let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes