How do I get these CSS grid items to line up properly?

HTML & CSS
1

I have two grid items, item-pic and item-desc. I’m using the code below, expecting them to appear side by side, but they are continuing down as one column, without gaps in the columns or rows.

How do I get them side by side?

.grid-container {
  display: grid;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: 200px auto;
  grid-template-rows: 200px 200px;
  grid-template-areas: 	"a b"
						"a b"; 
  justify-items: start;
  width: 95%;
  max-width: 700px;
  margin: 0 auto;
}
.item-pic {
	grid-area: a;
}
.item-desc {
	grid-area: b;
}
    </style>
</head>

<body>

<div>
	<img src="images/main_header-001.jpg" style="max-width: 100%">
</div>

<div class="grid-container">
	<div class="item-pic">
		<img src="images/Heritage_Logo_SQ-bw-2300.jpg" style="max-width: 200px">
	</div>
	<div class="item-desc">
		<p>Heritage Logo, blue</p>
		<button class="mediabuttonWeb" id="Heritage_Logo_SQblueP">PDF</button>
		<button class="mediabuttonWeb" id="Heritage_Logo_SQbluePng">PNG</button>
		<button class="mediabuttonWeb" id="Heritage_Logo_SQblueJ">JPG</button>
	</div>
	<div class="item-pic">
		<img src="images/Heritage_Logo_SQ-bw-2300.jpg" style="max-width: 200px">
	</div>
	<div class="item-desc">
		<p>Heritage Logo, blue</p>
		<button class="mediabuttonWeb" id="Heritage_Logo_SQblueP">PDF</button>
		<button class="mediabuttonWeb" id="Heritage_Logo_SQbluePng">PNG</button>
		<button class="mediabuttonWeb" id="Heritage_Logo_SQblueJ">JPG</button>
	</div>
</div>
2

Remove the grid template areas as that places all the items in a and b which means they are stacked on top of each other as though they were absolutely positioned.

3

They are still stacked when removed:

.grid-container {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 200px 200px;
  gap: 1em;
  justify-content: start;
  justify-items: start;
  width: 95%;
  max-width: 700px;
  margin: 0 auto;
}
.item-pic {
	max-width: 200px;
}
.item-desc {
	
}
4

In Layout, FF says “CSS Grid is not in use on this page.” Strange.

5

You must have a typo in the html.

Your code looks like this on codepen without the template areas.

I’m on a mobile tonight so can’t test properly so back in the morning now :slight_smile:

6

Hmm, no red marks in NetBeans. Although it doesn’t seem to recognize several Grid properties in the style tags.

7

Validate the css in case you have a typo or missed bracket higher up in the code.

As you can see the codepen with your code is working once the grid areas were removed.

Back tomorrow now.

8

I validated the CSS. A couple of validators showed several unknown properties. Evidently I was going by old code! Thanks!

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.