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
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;
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
asked Mar 28 at 18:10
henks20henks20
31 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.
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
asked Mar 28 at 18:10
henks20henks20
31 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
asked Mar 28 at 18:10
henks20henks20
31 bronze badge
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
css reactjs layout responsive-design
asked Mar 28 at 18:10
henks20henks20
31 bronze badge
asked Mar 28 at 18:10
henks20henks20
31 bronze badge
asked Mar 28 at 18:10
henks20henks20
31 bronze badge
asked Mar 28 at 18:10
henks20henks20
31 bronze badge
asked Mar 28 at 18:10
henks20henks20
31 bronze badge
31 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.
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.
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
|
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
4
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
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
|
2 Answers
2
active
oldest
votes
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>answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 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>
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 bronze badges
add a comment
|
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 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>answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 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>answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 bronze badges
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>.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>answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 bronze badges
answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 bronze badges
answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 bronze badges
answered Mar 28 at 20:31
PetterPetter
1,1949 silver badges12 bronze badges
1,1949 silver badges12 bronze badges
add a comment
|
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>
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 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>
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 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>
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 bronze badges
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>
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 bronze badges
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 bronze badges
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 bronze badges
answered Mar 28 at 19:44
DupocasDupocas
7,2253 gold badges7 silver badges27 bronze badges
7,2253 gold badges7 silver badges27 bronze badges
add a comment
|
add a comment
|
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