Html - I am trying to Figure out how to properly layout this grid for a project

Gjovani
May 1, 2023
285 views
0 votes
2 Answers

I have spent countless hours trying to figure out how to properly turn this section into a grid layout of a total of 5 images the 1st image on top left 4th image bottom left 2nd image in the middle top and bottom and the 3rd image top right and 5th image bottom right. I’ll include pictures of what I have tried and how it looks. I have tried using regular CSS as well as doing it with Tailwind classes and after a lot of research online and watching videos I haven’t been able to crack it. I got close but it isn’t how I want it to look. Any help will be greatly appreciated.

/* .topNotchImg {
  width: 50%;
  height: 300px;
} */

.gridTopNotch {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 5px 5px;
  padding: 30px;
  grid-template-areas: "pic-1 pic-1 pic-2 pic-2 pic-3 pic-3" "pic-1 pic-1 pic-2 pic-2 pic-3 pic-3" "pic-4 pic-4 pic-2 pic-2 pic-5 pic-5" "pic-4 pic-4 pic-2 pic-2 pic-5 pic-5";
}

.pic-1 {
  grid-area: pic-1;
}

.pic-2 {
  grid-area: pic-2;
}

.pic-3 {
  grid-area: pic-3;
}

.pic-4 {
  grid-area: pic-4;
}

.pic-5 {
  grid-area: pic-5;
}

<section>
  <div class="text-center">
    <h1 class="text-5xl pb-2"><strong>Top Notch Destinations</strong></h1>
    <p>These places are on everyone's bucket list</p>
  </div>
  <div class="gridTopNotch">
    <div class="topNotchImg pic-1">
      <img src="img/destinations-machu.jpg" alt="Machu Picchu" />
      <h4 class="text-xl"><strong>Machu Picchu</strong></h4>
      <p>Peru</p>
    </div>
    <div class="topNotchImg pic-2">
      <img src="img/destinations-rome.jpg" alt="Rome" />
      <h4 class="text-xl"><strong>Rome</strong></h4>
      <p>Italy</p>
    </div>
    <div class="topNotchImg pic-3">
      <img src="img/destinations-sydney.jpg" alt="Sydney" />
      <h4 class="text-xl"><strong>Sydney</strong></h4>
      <p>Australia</p>
    </div>
    <div class="topNotchImg pic-4">
      <img src="img/destinations-paris.jpg" alt="Paris" />
      <h4 class="text-xl"><strong>Paris</strong></h4>
      <p>France</p>
    </div>
    <div class="topNotchImg pic-5">
      <img src="img/destinations-rio.jpg" alt="Rio de Janeiro" />
      <h4 class="text-xl"><strong>Rio de Janeiro</strong></h4>
      <p>Brazil</p>
    </div>
  </div>
</section>

With Tailwind:

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-2 grid-flow-row gap-4">
  <img
    src="img/destinations-machu.jpg"
    alt="Image 1"
    class="rounded-md shadow-lg h-auto w-auto"
  />
  <img
    src="img/destinations-rome.jpg"
    alt="Image 2"
    class="rounded-md shadow-lg h-auto w-auto"
  />
  <img
    src="img/destinations-sydney.jpg"
    alt="Image 3"
    class="rounded-md shadow-lg h-auto w-auto"
  />
  <img
    src="img/destinations-paris.jpg"
    alt="Image 4"
    class="rounded-md shadow-lg h-auto w-auto"
  />
  <img
    src="img/destinations-rio.jpg"
    alt="Image 5"
    class="rounded-md shadow-lg h-auto w-auto"
  />
</div>

This is the Link for How it looks with the HTML and CSS

This is the Link for How it looks with Tailwind

This is How I am Trying to get it to look

I want to say thank you in advance – I’m not sure what else to do and I can’t seem to figure it out.

Answers

Consider simplifying it down to the required grid areas. You are going to want 3 columns, with the middle element spanning two rows.

.gridTopNotch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px 5px;
  padding: 30px;
  grid-template-areas:
    "pic-1 pic-2 pic-3"
    "pic-4 pic-2 pic-5";
}

.pic-1 {
  grid-area: pic-1;
}

.pic-2 {
  grid-area: pic-2;
}

.pic-3 {
  grid-area: pic-3;
}

.pic-4 {
  grid-area: pic-4;
}

.pic-5 {
  grid-area: pic-5;
}

<section>
  <div class="text-center">
    <h1 class="text-5xl pb-2"><strong>Top Notch Destinations</strong></h1>
    <p>These places are on everyone's bucket list</p>
  </div>
  <div class="gridTopNotch">
    <div class="topNotchImg pic-1">
      <img src="https://picsum.photos/200/100" alt="Machu Picchu" />
      <h4 class="text-xl"><strong>Machu Picchu</strong></h4>
      <p>Peru</p>
    </div>
    <div class="topNotchImg pic-2">
      <img src="https://picsum.photos/200/320" alt="Rome" />
      <h4 class="text-xl"><strong>Rome</strong></h4>
      <p>Italy</p>
    </div>
    <div class="topNotchImg pic-3">
      <img src="https://picsum.photos/200/100?" alt="Sydney" />
      <h4 class="text-xl"><strong>Sydney</strong></h4>
      <p>Australia</p>
    </div>
    <div class="topNotchImg pic-4">
      <img src="https://picsum.photos/200/100?0" alt="Paris" />
      <h4 class="text-xl"><strong>Paris</strong></h4>
      <p>France</p>
    </div>
    <div class="topNotchImg pic-5">
      <img src="https://picsum.photos/200/100?1" alt="Rio de Janeiro" />
      <h4 class="text-xl"><strong>Rio de Janeiro</strong></h4>
      <p>Brazil</p>
    </div>
  </div>
</section>

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-3 grid-row-2 gap-4">
  <img
    src="https://picsum.photos/200/100"
    alt="Image 1"
    class="rounded-md shadow-lg h-auto w-auto"
  />
  <img
    src="https://picsum.photos/200/220"
    alt="Image 2"
    class="rounded-md shadow-lg h-auto w-auto row-span-2"
  />
  <img
    src="https://picsum.photos/200/100?"
    alt="Image 3"
    class="rounded-md shadow-lg h-auto w-auto"
  />
  <img
    src="https://picsum.photos/200/100?0"
    alt="Image 4"
    class="rounded-md shadow-lg h-auto w-auto"
  />
  <img
    src="https://picsum.photos/200/100?1"
    alt="Image 5"
    class="rounded-md shadow-lg h-auto w-auto"
  />
</div>

One approach is as follows, with explanatory comments in the code:

/* a simple reset, to set margin and padding to
   0, to remove browser defaults, set the box-
   sizing algorithm to "border-box", in order to
   include padding and border-widths in the
   declared sizes:*/
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* setting the size of the element on the block-
     axis (the axis on which blocks are laid out,
     vertical in English and equivalent to
     "height"); setting to 100vh ensures that the
     body fills the viewport: */
  block-size: 100vh;
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

section {
  /* setting display grid, with a gap between
     adjacent grid-items of 1rem: */
  display: grid;
  gap: 1rem;
}

h1 {
  font-size: 4rem;
  font-weight: 700;
}

h4 {
  font-size: 2.5rem;
}

h4::after {
  /* this is personal taste, but is intended to
     add a comma after, for example, "Macchu
     Pichu" and before "Peru" (remove if
     unwanted): */
  content: ',';
}

.text-center {
  text-align: center;
}

.gridTopNotch {
  /* again, using CSS grid, with the same gap as
     before between adjacent grid-item elements: */
  display: grid;
  gap: 1rem;
  /* here we name three grid areas in each of two
     grid-rows, with the central grid-area - "cell
     2" - spanning both rows: */
  grid-template-areas:
    "cell-1 cell-2 cell-3"
    "cell-4 cell-2 cell-5";
  /* defining the size of each column, the first and
     third being 1fr, and the second (central) being
     2fr: */
  grid-template-columns: 1fr 2fr 1fr;
}

.pic-2 {
  /* positioning the .pic-2 element in the "cell-2"
     grid-area, specifying this purely because that
     grid-area spans two rows, which won't be
     applied when the cells are placed automatically: */
  grid-area: cell-2;
}

.topNotchImg {
  border: 1px solid currentColor;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

img {
  border-radius: 0.75rem;
  /* setting the maximum inline-size (the inline size is
     the size of the element on the inline axis, which
     is the axis on which inline content is laid out;
     the horizontal axis and therefore equivalent to
     "width" or "max-inline-width" in the English
     language: */
  max-inline-size: 100%;
  /* directing the element to fit the available space,
     and maintaining its aspect ratio: */
  object-fit: cover;
}

<section>
  <div class="text-center">
    <h1 class="text-5xl pb-2"><strong>Top Notch Destinations</strong></h1>
    <p>These places are on everyone's bucket list</p>
  </div>
  <div class="gridTopNotch">
    <div class="topNotchImg pic-1">
      <img src="https://picsum.photos/300/200" alt="Machu Picchu" />
      <h4 class="text-xl"><strong>Machu Picchu</strong></h4>
      <p>Peru</p>
    </div>
    <div class="topNotchImg pic-2">
      <img src="https://picsum.photos/300/200" alt="Rome" />
      <h4 class="text-xl"><strong>Rome</strong></h4>
      <p>Italy</p>
    </div>
    <div class="topNotchImg pic-3">
      <img src="https://picsum.photos/300/200" alt="Sydney" />
      <h4 class="text-xl"><strong>Sydney</strong></h4>
      <p>Australia</p>
    </div>
    <div class="topNotchImg pic-4">
      <img src="https://picsum.photos/300/200" alt="Paris" />
      <h4 class="text-xl"><strong>Paris</strong></h4>
      <p>France</p>
    </div>
    <div class="topNotchImg pic-5">
      <img src="https://picsum.photos/300/200" alt="Rio de Janeiro" />
      <h4 class="text-xl"><strong>Rio de Janeiro</strong></h4>
      <p>Brazil</p>
    </div>
  </div>
</section>

JS Fiddle demo.

References:

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I am trying to Figure out how to properly layout this grid for a project

Answers