Styjun

What happens to a net with the Returning Weapon artificer infusion after it hits?

What exactly did this mechanic sabotage on the American Airlines 737, and how dangerous was it?

How 象【しょう】 ( ≈かたち、 すがた、ようす) and 象【ぞう】 (どうぶつ) got to be written with the same kanji?

A food item only made possible by time-freezing storage?

How can I tell the difference between fishing for rolls and being involved?

Could Apollo astronauts see city lights from the moon?

Lost Update Understanding

Interchange `colon` and `:`

Why did the Soviet Union not "grant" Inner Mongolia to Mongolia after World War Two?

Why was LOGO created?

Iterating over &Vec<T> and Vec<&T>

What does מעלה עליו הכתוב mean?

Hangman Game (YAHG)

Clear text passwords in Unix

My Project Manager does not accept carry-over in Scrum, Is that normal?

Does the Horizon Walker ranger's Planar Warrior feature bypass resistance to non-magical attacks?

Subverting the emotional woman and stoic man trope

Need Improvement on Script Which Continuosly Tests Website

My manager quit. Should I agree to defer wage increase to accommodate budget concerns?

What should I consider when deciding whether to delay an exam?

Is it a good idea to leave minor world details to the reader's imagination?

Suffocation while cooking under an umbrella?

Why does (inf + 0j)*1 evaluate to inf + nanj?

Why is STARTTLS still used?

Adding divs into a div (responsive layout) [closed]

Make a div fill the height of the remaining screen spaceHow to horizontally center a <div>?How to make div not larger than its contents?Div width 100% minus fixed amount of pixelsMaintain the aspect ratio of a div with CSSHow to make a div 100% height of the browser windowManaging CSS ExplosionCSS: Setting width/height as Percentage minus pixelsClick through div to underlying elementsResponsive css background images

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

-1

I'm creating a responsive website using only CSS and React. I'd like to have a lot of divs in one main div but keeping their responsiveness and 3 columns layout. In the future, additional small divs will be added automatically. How can I achieve such a result?

I'm a beginner and I'm thinking about flexbox but I don't know how to use it to get a 3 column responsive layout.

n/a

css reactjs layout responsive-design

share|improve this question

asked Mar 28 at 18:10

henks20henks20

311 bronze badge

closed as too broad by lux, Cindy Meister, Sinto, AkshayNevrekar, Serenity Mar 29 at 7:09

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  
  What is your question here? Have you tried something and it isn't working? What exactly do you need answered?
  
  – Avery
  Mar 28 at 18:11
  

  
  
  
  

add a comment
 | 

-1

I'm creating a responsive website using only CSS and React. I'd like to have a lot of divs in one main div but keeping their responsiveness and 3 columns layout. In the future, additional small divs will be added automatically. How can I achieve such a result?

I'm a beginner and I'm thinking about flexbox but I don't know how to use it to get a 3 column responsive layout.

n/a

css reactjs layout responsive-design

share|improve this question

asked Mar 28 at 18:10

henks20henks20

311 bronze badge

closed as too broad by lux, Cindy Meister, Sinto, AkshayNevrekar, Serenity Mar 29 at 7:09

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  
  What is your question here? Have you tried something and it isn't working? What exactly do you need answered?
  
  – Avery
  Mar 28 at 18:11
  

  
  
  
  

add a comment
 | 

I'm creating a responsive website using only CSS and React. I'd like to have a lot of divs in one main div but keeping their responsiveness and 3 columns layout. In the future, additional small divs will be added automatically. How can I achieve such a result?

I'm a beginner and I'm thinking about flexbox but I don't know how to use it to get a 3 column responsive layout.

n/a

css reactjs layout responsive-design

share|improve this question

asked Mar 28 at 18:10

henks20henks20

311 bronze badge

share|improve this question

asked Mar 28 at 18:10

henks20henks20

311 bronze badge

share|improve this question

asked Mar 28 at 18:10

henks20henks20

311 bronze badge

asked Mar 28 at 18:10

henks20henks20

311 bronze badge

asked Mar 28 at 18:10

henks20henks20

311 bronze badge

2 Answers
2

active

oldest

votes

0

If you're looking at solving it with pure CSS you could use flexboxes, but I would suggest that you have a look at bootstrap as Dupocas suggested. It will help you with the layout and responsiveness.

Still, here is a short example of how you could solve it using flexboxes:

.board 
 background-color: grey;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;


.item 
 background-color: lightgrey;
 width: 30%;

<div class="board">
 <div class="item">
 One
 </div>
 <div class="item">
 Two
 </div>
 <div class="item">
 Three
 </div>
 <div class="item">
 Four
 </div>
 <div class="item">
 Five
 </div>
 <div class="item">
 Six
 </div>
</div>

share|improve this answer

answered Mar 28 at 20:31

PetterPetter

1,19499 silver badges1212 bronze badges

add a comment
 | 

1

If resposiveness it's all you need (don't care about break points) then flexbox will solve your problems. But if you want more specificity then take a look in bootstrap and similar solutions, for example, the code bellow use material-ui's implementation of bootstrap's grid system. It declares 3 boxes that change the number of columns they occupy according to the viewport's size.

<Grid container>
 <Grid item sm=12 md=6 lg=4>
 Item one
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item two
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item three
 </Grid>
</Grid>

share|improve this answer

answered Mar 28 at 19:44

DupocasDupocas

7,22533 gold badges77 silver badges2727 bronze badges

add a comment
 | 

0

If you're looking at solving it with pure CSS you could use flexboxes, but I would suggest that you have a look at bootstrap as Dupocas suggested. It will help you with the layout and responsiveness.

Still, here is a short example of how you could solve it using flexboxes:

.board 
 background-color: grey;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;


.item 
 background-color: lightgrey;
 width: 30%;

<div class="board">
 <div class="item">
 One
 </div>
 <div class="item">
 Two
 </div>
 <div class="item">
 Three
 </div>
 <div class="item">
 Four
 </div>
 <div class="item">
 Five
 </div>
 <div class="item">
 Six
 </div>
</div>

share|improve this answer

answered Mar 28 at 20:31

PetterPetter

1,19499 silver badges1212 bronze badges

add a comment
 | 

0

If you're looking at solving it with pure CSS you could use flexboxes, but I would suggest that you have a look at bootstrap as Dupocas suggested. It will help you with the layout and responsiveness.

Still, here is a short example of how you could solve it using flexboxes:

.board 
 background-color: grey;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;


.item 
 background-color: lightgrey;
 width: 30%;

<div class="board">
 <div class="item">
 One
 </div>
 <div class="item">
 Two
 </div>
 <div class="item">
 Three
 </div>
 <div class="item">
 Four
 </div>
 <div class="item">
 Five
 </div>
 <div class="item">
 Six
 </div>
</div>

share|improve this answer

answered Mar 28 at 20:31

PetterPetter

1,19499 silver badges1212 bronze badges

add a comment
 | 

If you're looking at solving it with pure CSS you could use flexboxes, but I would suggest that you have a look at bootstrap as Dupocas suggested. It will help you with the layout and responsiveness.

Still, here is a short example of how you could solve it using flexboxes:

.board 
 background-color: grey;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;


.item 
 background-color: lightgrey;
 width: 30%;

<div class="board">
 <div class="item">
 One
 </div>
 <div class="item">
 Two
 </div>
 <div class="item">
 Three
 </div>
 <div class="item">
 Four
 </div>
 <div class="item">
 Five
 </div>
 <div class="item">
 Six
 </div>
</div>

share|improve this answer

answered Mar 28 at 20:31

PetterPetter

1,19499 silver badges1212 bronze badges

.board 
 background-color: grey;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;


.item 
 background-color: lightgrey;
 width: 30%;

<div class="board">
 <div class="item">
 One
 </div>
 <div class="item">
 Two
 </div>
 <div class="item">
 Three
 </div>
 <div class="item">
 Four
 </div>
 <div class="item">
 Five
 </div>
 <div class="item">
 Six
 </div>
</div>

.board 
 background-color: grey;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;


.item 
 background-color: lightgrey;
 width: 30%;

<div class="board">
 <div class="item">
 One
 </div>
 <div class="item">
 Two
 </div>
 <div class="item">
 Three
 </div>
 <div class="item">
 Four
 </div>
 <div class="item">
 Five
 </div>
 <div class="item">
 Six
 </div>
</div>

.board 
 background-color: grey;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;


.item 
 background-color: lightgrey;
 width: 30%;

<div class="board">
 <div class="item">
 One
 </div>
 <div class="item">
 Two
 </div>
 <div class="item">
 Three
 </div>
 <div class="item">
 Four
 </div>
 <div class="item">
 Five
 </div>
 <div class="item">
 Six
 </div>
</div>

share|improve this answer

answered Mar 28 at 20:31

PetterPetter

1,19499 silver badges1212 bronze badges

answered Mar 28 at 20:31

PetterPetter

1,19499 silver badges1212 bronze badges

answered Mar 28 at 20:31

PetterPetter

1,19499 silver badges1212 bronze badges

1

If resposiveness it's all you need (don't care about break points) then flexbox will solve your problems. But if you want more specificity then take a look in bootstrap and similar solutions, for example, the code bellow use material-ui's implementation of bootstrap's grid system. It declares 3 boxes that change the number of columns they occupy according to the viewport's size.

<Grid container>
 <Grid item sm=12 md=6 lg=4>
 Item one
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item two
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item three
 </Grid>
</Grid>

share|improve this answer

answered Mar 28 at 19:44

DupocasDupocas

7,22533 gold badges77 silver badges2727 bronze badges

add a comment
 | 

1

If resposiveness it's all you need (don't care about break points) then flexbox will solve your problems. But if you want more specificity then take a look in bootstrap and similar solutions, for example, the code bellow use material-ui's implementation of bootstrap's grid system. It declares 3 boxes that change the number of columns they occupy according to the viewport's size.

<Grid container>
 <Grid item sm=12 md=6 lg=4>
 Item one
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item two
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item three
 </Grid>
</Grid>

share|improve this answer

answered Mar 28 at 19:44

DupocasDupocas

7,22533 gold badges77 silver badges2727 bronze badges

add a comment
 | 

If resposiveness it's all you need (don't care about break points) then flexbox will solve your problems. But if you want more specificity then take a look in bootstrap and similar solutions, for example, the code bellow use material-ui's implementation of bootstrap's grid system. It declares 3 boxes that change the number of columns they occupy according to the viewport's size.

<Grid container>
 <Grid item sm=12 md=6 lg=4>
 Item one
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item two
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item three
 </Grid>
</Grid>

share|improve this answer

answered Mar 28 at 19:44

DupocasDupocas

7,22533 gold badges77 silver badges2727 bronze badges

<Grid container>
 <Grid item sm=12 md=6 lg=4>
 Item one
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item two
 </Grid>
 <Grid item sm=12 md=6 lg=4>
 Item three
 </Grid>
</Grid>

share|improve this answer

answered Mar 28 at 19:44

DupocasDupocas

7,22533 gold badges77 silver badges2727 bronze badges

answered Mar 28 at 19:44

DupocasDupocas

7,22533 gold badges77 silver badges2727 bronze badges

answered Mar 28 at 19:44

DupocasDupocas

7,22533 gold badges77 silver badges2727 bronze badges