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

Html – How to align the grid items to the screen if one item is removed-CSS

I have seven items loaded. I am going to write the logic such that if I hide the items, the other items should align to the screen automatically

For example,
if the task is removed(hidden) the item1, item2, item3, item 4,and the other item should align to the screen and vice versa

.grid-container {
  display: grid;
  padding: 77px 88px 0 88px;
  background-color: #F4F4F4;
  grid-template-columns: 624px repeat(2, 304px);
  grid-template-rows: auto repeat(2, 1fr) fr;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.tasks {
  grid-column: 1/2;
  grid-row: 1/3;
}

.t1 {
  grid-column: 2/3;
  grid-row: 1/2;
}

.t2 {
  grid-column: 3/4;
  grid-row: 1/2;
}

.t3 {
  grid-column: 2/3;
  grid-row: 2/3;
}

.t4 {
  grid-column: 3/4;
  grid-row: 2/3;
}

.otherItems {
  grid-column: 1/4;
  grid-row: 3/4;
}
<div class="grid-container">
  <div class="task">Task</div>
  <div class="t1">1</div>
  <div class="t2">2</div>
  <div class="t3">3</div>
  <div class="t4">4</div>
  <div class="otheritems">other items</div>
</div>

enter image description here

enter image description here

Tags:

2

Answers


  1. 0

    You can use the align-items property on the grid container, to align the items using one of the following values: like
    auto.
    normal.
    start.
    end.
    center.

    Login or Signup to reply.
  2. 0

    Do not set columns and rows to the items, just let the grid place them

    .grid-container {
  display: grid;
  grid-template-columns: 90px repeat(3, 80px);
  grid-template-rows: auto repeat(2, 1fr) 1fr;
  align-items: center;
  grid-gap: 1rem;
}

.grid-container * {
 background-color: tomato;
 height: 100%;
}

.task {
  grid-row: span 2;
}


.otheritems {
  grid-column: span 4;
  width: 360px;
}
    <div class="grid-container">
  <div class="task">Task</div>
  <div class="t1">1</div>
  <div class="t2">2</div>
  <div class="t3">3</div>
  <div class="t4">4</div>
  <div class="otheritems">other items</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search