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

Can HTML adjust grid template columns for mobile view?

I’m trying to make a grid template, but I’m obviously making a mistake somewhere. I need help how to make between box 1 and box 2 stand box 3 for mobile devices or when resize the window.

Thanks!

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 1rem;
  gap: 1rem;
}

.grid-item {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  font-family: cursive;
  color: #e6c037;
  background-color: #784367;
  text-align: center;
}

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

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

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

```
<div class="grid-container">
  <div class="grid-item item-1">Box Оne</div>
  <div class="grid-item item-2">Box Two</div>
  <div class="grid-item item-3">Box Three</div>
</div>
Tags:

2

Answers


  1. 0

    I’m not sure it answers exactly to your question (some others layout possibilities could be done here)… but it’ll give you some tracks

    *,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 3fr);
  padding: 1rem;
  gap: 1rem;
}

.grid-item {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  font-family: cursive;
  color: #e6c037;
  background-color: #784367;
  text-align: center;
}

.item-1 {
  grid-area: 1 / 1 / 2 / 2;
}

.item-2 {
  grid-area: 2 / 1 / 3 / 2;
}

.item-3 {
  grid-area: 3 / 1 / 4 / 2;
}

@media (min-width: 35em) {
  /* 560px */
}

@media (min-width: 48em) {
  /* 768px */
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .item-1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .item-2 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .item-3 {
    grid-area: 2 / 1 / 3 / 3;
  }
}

@media (min-width: 62em) {
  /* 992px */
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
  .item-1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .item-2 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .item-3 {
    grid-area: 1 / 3 / 2 / 4;
  }
}
    <div class="grid-container">
  <div class="grid-item item-1">Box Оne</div>
  <div class="grid-item item-2">Box Two</div>
  <div class="grid-item item-3">Box Three</div>
</div>
    Login or Signup to reply.
  2. 0

    You can make this work using line-based placement, which is the method you’re using in your code (i.e., grid-row: 1 / 3, etc.). But the lines of code add up when programming for desktop, tablet and mobile.

    Instead, keep it simple and easy with Grid Areas.

    .item-1 { grid-area: item1; }
.item-2 { grid-area: item2; }
.item-3 { grid-area: item3; }

/* desktop view */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: " item1 item1 item3 "
                       " item1 item1 item3"
                       " item2 item2  .   ";
}

/* mobile view */
@media ( max-width: 750px ) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas: " item1 "
                         " item3 "
                         " item2 ";
    background-color: aqua;      
  }
}

.grid-container {
  padding: 1rem;
  gap: 1rem;
}

.grid-item {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  font-family: cursive;
  color: #e6c037;
  background-color: #784367;
  text-align: center;
}
    <div class="grid-container">
  <div class="grid-item item-1">Box Оne</div>
  <div class="grid-item item-2">Box Two</div>
  <div class="grid-item item-3">Box Three</div>
</div>

    jsFiddle demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search