CSS Grid Layout Not Displaying Rows Correctly Like My Flexbox Layout

Question

Question:

I am trying to build a CSS grid layout to display pictures in a UI with three rows. However, the grid layout does not behave as expected and looks different from the Flexbox layout I implemented. Here is my code:

CSS for the Grid Layout

.parent-container {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  width: 100px;
  margin-left: 200px;
  margin-bottom: 20px;
}

.harris-pitch {
  width: 400px;
  height: 250px;
  margin-left: 20px;
  margin-top: 20px;
}

.harris {
  margin-top: 80px;
}

.black-men {
  margin-left: 20px;
  font-size: 20px;
}

.election {
  width: 400px;
  font-size: 15px;
  margin-left: 20px;
  margin-top: 10px;
  color: rgb(110, 109, 109);
}

.north-strike {
  width: 230px;
  height: 130px;
  margin-bottom: 15px;
}

.strike {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 3px;
}

.report,
.agent {
  color: rgb(110, 109, 109);
  margin-top: 10px;
  font-size: 14px;
}

<div class="parent-container">
  <div class="north">
    <img class="north-strike" src="pictures/download (1).jpeg">
    <div class="strike">Lebanese Red Cross says 18 people killed in Israeli strike in the country's north</div>
    <div class="report">Report suggests multiple casualties in the Christian-majority region in the north of the country</div>
  </div>
  <div class="harris">
    <img class="harris-pitch" src="pictures/download.jpeg">
    <div class="black-men"><span>LIVE</span> Harris makes a pitch for the Black male vote as polls suggest fading support</div>
    <div class="election">The presidential candidates are campaigning in the battleground state of Pennsylvania on Monday in the final sprint of the election</div>
  </div>
  <div class="canada">
    <img class="canada-murder" src="pictures/download (2).jpeg">
    <div class="charge">India and Canada expel top diplomats over murder charges</div>
    <div class="agent">Canada accuses agents of the Indian government of involvement in "homicides, extortion, and violent acts."</div>
  </div>
</div>

Expected Behavior

I expect the grid layout to appear in three rows with each row containing an image and its corresponding text, similar to the Flexbox layout I have used previously.

Flexbox Layout for Reference

Here is the CSS I used for the Flexbox layout that works as expected:

.container {
  max-width: 1000px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1em;
  font-family: Georgia, 'Times New Roman', Times, serif;
  padding: 20px 1px;
  margin-top: 10px;
}

.left,
.right,
.left-d,
.right-d {
  max-width: 250px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 40px;
}

.middle,
.middle-d {
  max-width: 400px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.live {
  width: 100%;
  display: flex;
}

<div class="parent-container">
  <div class="north">
    <img class="north-strike" src="pictures/download (1).jpeg">
    <div class="strike">Lebanese Red Cross says 18 people killed in Israeli strike in the country's north</div>
    <div class="report">Report suggests multiple casualties in the Christian-majority region in the north of the country</div>
  </div>
  <div class="harris">
    <img class="harris-pitch" src="pictures/download.jpeg">
    <div class="black-men"><span>LIVE</span> Harris makes a pitch for the Black male vote as polls suggest fading support</div>
    <div class="election">The presidential candidates are campaigning in the battleground state of Pennsylvania on Monday in the final sprint of the election</div>
  </div>
  <div class="canada">
    <img class="canada-murder" src="pictures/download (2).jpeg">
    <div class="charge">India and Canada expel top diplomats over murder charges</div>
    <div class="agent">Canada accuses agents of the Indian government of involvement in "homicides, extortion, and violent acts."</div>
  </div>
</div>

Problem

The grid layout seems to be restricting the width of the rows, and the rows don't appear correctly aligned like in the Flexbox layout. What am I doing wrong with my grid layout? How can I adjust the grid-template-rows and grid-template-columns to ensure each item occupies a full row?

What I Tried

• Adjusting the grid-template-rows and grid-template-columns.

• Changing the width of the .parent-container.

What I Need Help With

How can I correctly use the CSS Grid layout to achieve the desired three-row layout for my pictures and their accompanying text, similar to my Flexbox layout?

Answer 1

To achieve the desired grid layout with three rows and each row containing an image and corresponding text, you need to adjust the CSS Grid setup. In your current layout, you have grid-template-rows: 1fr 1fr;, which only defines two rows. To make it work as intended, you should:

Set grid-template-rows to define three rows (for each picture and text pair). Define the columns and rows properly to let the grid items occupy full rows.

.parent-container {
  display: grid;
  align-items: start;
  justify-items: center;
  grid-template-rows: auto;
  /* Automatically adjust based on content */
  grid-template-columns: 1fr;
  /* Single column layout for full width */
  row-gap: 20px;
  /* Add gap between rows */
  width: 100%;
  max-width: 1200px;
  /* Set a max-width for better responsiveness */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.harris-pitch,
.north-strike,
.canada-murder {
  width: 100%;
  /* Make the images responsive */
  max-width: 400px;
  /* Optional: Set max width for images */
}

.harris,
.north,
.canada {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.strike,
.report,
.charge,
.agent,
.election {
  margin-top: 10px;
}

<div class="parent-container">
  <div class="north">
    <img class="north-strike" src="pictures/download (1).jpeg">
    <div class="strike">Lebanese Red Cross says 18 people killed in Israeli strike in the country's north</div>
    <div class="report">Report suggests multiple casualties in the Christian-majority region in the north of the country</div>
  </div>
  <div class="harris">
    <img class="harris-pitch" src="pictures/download.jpeg">
    <div class="black-men"><span>LIVE</span> Harris makes a pitch for the Black male vote as polls suggest fading support</div>
    <div class="election">The presidential candidates are campaigning in the battleground state of Pennsylvania on Monday in the final sprint of the election</div>
  </div>
  <div class="canada">
    <img class="canada-murder" src="pictures/download (2).jpeg">
    <div class="charge">India and Canada expel top diplomats over murder charges</div>
    <div class="agent">Canada accuses agents of the Indian government of involvement in "homicides, extortion, and violent acts."</div>
  </div>
</div>