Html - CSS grid custom layout

superfive33
January 9, 2024
298 views
2 votes
3 Answers

I am trying to build a CSS grid

I do not want to have space between item2 and item3, and want these items to be aligned on top of the container.

Is this possible with CSS only, without modifying the HTML structure?

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.item1,
.item2,
.item3 {
  border: 1px solid black;
}

.item1 {
  grid-column: span 1;
  grid-row: span 2;
}

.item1 img {
  width: 80px;
  height: 115px;
}

.item2,
.item3 {
  grid-column: span 1;
  grid-row: span 1;
}

<div class="grid-container">
  <div class="item1">
    <img src="https://dummyimage.com/80x115/000/fff">
  </div>
  <div class="item2">Element 2</div>
  <div class="item3">Element 3</div>
</div>

Answers

Use the below code to fulfill your requirement.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.item1,
.item2,
.item3 {
    border: 1px solid black;
}

.item1 {
    grid-column: span 1;
    grid-row: span 3;
}

.item1 img {
    width: 80px;
    height: 115px;
}

.item2,
.item3 {
    grid-column: span 1;
    grid-row: span 1;
}

<div class="grid-container">
    <div class="item1">
        <img src="https://dummyimage.com/80x115/000/fff">
    </div>
    <div class="item2">Element 2</div>
    <div class="item3">Element 3</div>
</div>

Add these lines to your .grid-container style:

  grid-template-rows: 0fr 1fr;
  row-gap: 0;

Preview:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
  grid-template-rows: 0fr 1fr;
  row-gap: 0;
}

.item1,
.item2,
.item3 {
  border: 1px solid black;
}

.item1 {
  grid-column: span 1;
  grid-row: span 2;
}

.item1 img {
  width: 80px;
  height: 115px;
}

.item2,
.item3 {
  grid-column: span 1;
  grid-row: span 1;
}

<div class="grid-container">
  <div class="item1">
    <img src="https://dummyimage.com/80x115/000/fff">
  </div>
  <div class="item2">Element 2</div>
  <div class="item3">Element 3</div>
</div>

Here’s one way you could do it. Not the best but it works using CSS only, without changing the HTML structure.

HTML

<div class="grid-container">
  <div class="item1">
    <img src="https://dummyimage.com/80x115/000/fff">
  </div>
  <div class="item2">Element 2</div>
  <div class="item3">Element 3</div>
</div>

CSS

.grid-container {
  display: grid;
  /*   grid-template-columns: 1fr 1fr; */
  gap: 10px;
  align-items: start;

  grid-template-areas: 
    "left right"
    "left right";
}

.item1,
.item2,
.item3 {
  border: 1px solid black;
}

.item1 {
  grid-area: left;
  /*   grid-column: span 1;
  grid-row: span 2; */
}

.item1 img {
  width: 80px;
  height: 115px;
}

.item2,
.item3 {
/*   grid-column: span 1;
  grid-row: span 1; */
  grid-area: right;
}

.item3 {
  transform: translateY(100%);
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS grid custom layout

Answers