CODEWITHSUNDEEP
htmlcss
avenas8808
avenas8808

Reputation: 217

Grid item not displaying as 3 columns properly?

I have a small template I've been working on, and while it looks plain, the main problem is that the end user has to scroll across.

It works well as 3 items per grid, and the href with text-decoration none works as expected.

What's not working is how to get the items to fit at a reasonable size and keep it as the columns within the div class grid-item.

This is my code:

body {
font-family: Helvetica, sans-serif;
font-size: 14px;
}


.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 2px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
  width: 400px;
  height: auto;
}
.grid-item {
margin: 5px;
}
.grid-item picture img {
margin-left: 5px;
width: 185px;
float: left;
}

.grid-item p {
  float: left;
  width: 30%;
  padding: 1%;
  margin-left: 20px;
line-height: 14px;
}
<div class="grid-container">
  <div class="grid-item">
  <picture><img src="https://platform.cstatic-images.com/xlarge/in/v2/stock_photos/1a0f9f79-2b07-441d-a757-086adbb6064f/53c7ee05-0008-45e1-9bd8-5732e136c3e5.png"></picture>
    <p><b>2011 BUICK LUCERNE 3.8 V6 CXL</b>, 4dr sedan, red <b>POA</b</p>
</div>

  <div class="grid-item">
  <picture><img src="https://platform.cstatic-images.com/xlarge/in/v2/stock_photos/6be7b1e9-57d8-4fe1-bdda-a855200a8d8a/fbb899f1-5ef1-4ec0-b4f9-6107bd4bc3f1.png"></picture>
    <p><b>2009 CADILLAC DTS 1SB 4.6 V8 4dr</b> Medium Blue <b>$28990</b></p>
</div>

  <div class="grid-item">
  <picture><img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/MG_F_%282000%29_-_14428744349.jpg"></picture>
    <p><b>2007 CADILLAC DTS LUXURY 4.6 V8 4dr</b> crimson pearl, 150,000 km, originally titled from Winter Park, FL <b>$6300</b></p>
</div>

  <div class="grid-item">
  <picture><img src="https://platform.cstatic-images.com/xlarge/in/v2/stock_photos/7c8c776d-ffdc-4ae7-9d16-b603e37642a3/b5e7ffd0-6649-47e8-8e1d-402ea0fee13a.png"></picture>
    <p><b>2004 PONTIAC GRAND PRIX 3.8 V6 GT2 4dr</b> superior blue, alloys, 183,000 miles <b>POA</b></p>
</div>

  <div class="grid-item">
  <picture><img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/MG_F_%282000%29_-_14428744349.jpg"></picture>
    <p><b>1996 CHRYSLER CIRRUS 2.5 V6 LXi</b> 4dr, blue, 130,000 km <b>$550</b></p>
</div>

  <div class="grid-item">
  <picture><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Ingo-arndt-markv.jpg"></picture>
    <p><b>1979 LINCOLN CONTINENTAL MARK V 6.6 V8 2-DR HARDTOP</b> silver, 170,000 miles. Well-kept classic from Phoenix, AZ, one owner since new. <b>POA</b></p>
</div>


 </div>

I've been trying flex and grid as ways to display it 3 columns, but this one has code broken somewhere and I can't quite figure out where I've made the mistake with grid-item.

If anyone could advise, it's appreciated; it's far from production standard.

Upvotes: 2

Views: 118

Answers (1)

Briuor
Briuor

Reputation: 291

There was a tag </b> not being closed properly inside the <p> tag of the first grid-item here <p><b>2011 BUICK LUCERNE 3.8 V6 CXL</b>, 4dr sedan, red <b>POA</b</p>

body {
font-family: Helvetica, sans-serif;
font-size: 14px;
}


.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 2px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
  width: 400px;
  height: auto;
}
.grid-item {
margin: 5px;
}
.grid-item picture img {
margin-left: 5px;
width: 185px;
float: left;
}

.grid-item p {
  float: left;
  width: 30%;
  padding: 1%;
  margin-left: 20px;
line-height: 14px;
}
<div class="grid-container">
  <div class="grid-item">
    <picture><img src="https://platform.cstatic-images.com/xlarge/in/v2/stock_photos/1a0f9f79-2b07-441d-a757-086adbb6064f/53c7ee05-0008-45e1-9bd8-5732e136c3e5.png"></picture>
    <p><b>2011 BUICK LUCERNE 3.8 V6 CXL</b>, 4dr sedan, red <b>POA</b></p>
  </div>

  <div class="grid-item">
    <picture><img src="https://platform.cstatic-images.com/xlarge/in/v2/stock_photos/6be7b1e9-57d8-4fe1-bdda-a855200a8d8a/fbb899f1-5ef1-4ec0-b4f9-6107bd4bc3f1.png"></picture>
    <p><b>2009 CADILLAC DTS 1SB 4.6 V8 4dr</b> Medium Blue <b>$28990</b></p>
  </div>

  <div class="grid-item">
    <picture><img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/MG_F_%282000%29_-_14428744349.jpg"></picture>
    <p><b>2007 CADILLAC DTS LUXURY 4.6 V8 4dr</b> crimson pearl, 150,000 km, originally titled from Winter Park, FL <b>$6300</b></p>
  </div>

  <div class="grid-item">
    <picture><img src="https://platform.cstatic-images.com/xlarge/in/v2/stock_photos/7c8c776d-ffdc-4ae7-9d16-b603e37642a3/b5e7ffd0-6649-47e8-8e1d-402ea0fee13a.png"></picture>
    <p><b>2004 PONTIAC GRAND PRIX 3.8 V6 GT2 4dr</b> superior blue, alloys, 183,000 miles <b>POA</b></p>
  </div>

  <div class="grid-item">
    <picture><img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/MG_F_%282000%29_-_14428744349.jpg"></picture>
    <p><b>1996 CHRYSLER CIRRUS 2.5 V6 LXi</b> 4dr, blue, 130,000 km <b>$550</b></p>
  </div>

  <div class="grid-item">
    <picture><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Ingo-arndt-markv.jpg"></picture>
    <p><b>1979 LINCOLN CONTINENTAL MARK V 6.6 V8 2-DR HARDTOP</b> silver, 170,000 miles. Well-kept classic from Phoenix, AZ, one owner since new. <b>POA</b></p>
  </div>


</div>

Upvotes: 2

Related Questions