Question 316944 in Html Question posted in
Some basic documentation can be found here.

Html – CSS grid custom layout

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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%);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search