CODEWITHSUNDEEP
htmlcssgrid
user2959870
user2959870

Reputation: 78

How to display two divs next to each other on a smartphone?

I have 4 divs and on a normal computer screen, they come next to each other with the following code.

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

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

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

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

.div4 {
  grid-area: 1 / 4 / 2 / 5;
}
<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

When I view this on my smartphone, all 4 divs will display in 1 row. How can I display 2 divs in 1 row? So the final result will be 2 rows with 2 divs each on a smartphone.

Upvotes: 0

Views: 121

Answers (2)

Sp&#243;&#242;ks
Sp&#243;&#242;ks

Reputation: 1

You can use @media screen to make custom Css for different screen sizes.

@media screen is used to specify different layout for various screen sizes.

You can find the guide here:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

This guide also includes examples where you would get an idea how to unitize @media screen thing.

Upvotes: 0

tacoshy
tacoshy

Reputation: 13002

change this line: grid-template-columns: repeat(4, 1fr); to: grid-template-columns: repeat(2, 1fr); then you only have 2 columns per row.

then change this line: grid-template-rows: 1fr; to: grid-auto-rows: auto; to automatically insert as many rows as needed at size them to the highest content.

last but not least: delete css for all div-boxes as they are useless in this case anyway. Also its not the way it is or should be used.

use media queries to adjust design for different screen sizes as used in the sample below:

@media start the media query. with only screen you define that only the screen size should be used as rule. and (max-width: 480px) defines the rule to be applied for mobile screens (largest is 480px width for portrait mode).

.parent {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 0px;
}

@media only screen
  and (max-width: 480px) {
    .parent {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen
  and (min-width: 481px) {
    .parent {
      grid-template-columns: repeat(4, 1fr);
    }
}
<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

Upvotes: 2

Related Questions