How do I make columns with CSS flexbox that include images?
0
I'm trying to make a multi-column layout in CSS with flexbox. For screens 1025px or higher, I want it to be a 3 column layout. Between a screen width of 720px to 1025px, I want there to be only 2 columns. I've tried in many ways to make this happen, but I seem to only be able to create the 3 columns I want. Here is the code I used to create my 3 columns:
.deals {
text-align: center;
}
.deal {
flex-basis: 100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) {
/* columns for home page */
.deals {
display: flex;
flex-direction: row;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>html css css3 flexbox
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
add a comment |
0
I'm trying to make a multi-column layout in CSS with flexbox. For screens 1025px or higher, I want it to be a 3 column layout. Between a screen width of 720px to 1025px, I want there to be only 2 columns. I've tried in many ways to make this happen, but I seem to only be able to create the 3 columns I want. Here is the code I used to create my 3 columns:
.deals {
text-align: center;
}
.deal {
flex-basis: 100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) {
/* columns for home page */
.deals {
display: flex;
flex-direction: row;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>html css css3 flexbox
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
If you’re looking for “columns”, have you played with CSS grid—either to replace or use with flexbox?
– stealththeninja
Nov 24 '18 at 4:22
add a comment |
0
0
0
I'm trying to make a multi-column layout in CSS with flexbox. For screens 1025px or higher, I want it to be a 3 column layout. Between a screen width of 720px to 1025px, I want there to be only 2 columns. I've tried in many ways to make this happen, but I seem to only be able to create the 3 columns I want. Here is the code I used to create my 3 columns:
.deals {
text-align: center;
}
.deal {
flex-basis: 100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) {
/* columns for home page */
.deals {
display: flex;
flex-direction: row;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>html css css3 flexbox
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
I'm trying to make a multi-column layout in CSS with flexbox. For screens 1025px or higher, I want it to be a 3 column layout. Between a screen width of 720px to 1025px, I want there to be only 2 columns. I've tried in many ways to make this happen, but I seem to only be able to create the 3 columns I want. Here is the code I used to create my 3 columns:
.deals {
text-align: center;
}
.deal {
flex-basis: 100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) {
/* columns for home page */
.deals {
display: flex;
flex-direction: row;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>.deals {
text-align: center;
}
.deal {
flex-basis: 100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) {
/* columns for home page */
.deals {
display: flex;
flex-direction: row;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>.deals {
text-align: center;
}
.deal {
flex-basis: 100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) {
/* columns for home page */
.deals {
display: flex;
flex-direction: row;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>html css css3 flexbox
html css css3 flexbox
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
edited Nov 27 '18 at 23:16
TylerH
15.8k105368
15.8k105368
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
asked Nov 24 '18 at 3:45
joseph chauvinjoseph chauvin
32
32
If you’re looking for “columns”, have you played with CSS grid—either to replace or use with flexbox?
– stealththeninja
Nov 24 '18 at 4:22
add a comment |
If you’re looking for “columns”, have you played with CSS grid—either to replace or use with flexbox?
– stealththeninja
Nov 24 '18 at 4:22
If you’re looking for “columns”, have you played with CSS grid—either to replace or use with flexbox?
– stealththeninja
Nov 24 '18 at 4:22
If you’re looking for “columns”, have you played with CSS grid—either to replace or use with flexbox?
– stealththeninja
Nov 24 '18 at 4:22
add a comment |
3 Answers
3
active
oldest
votes
1
For the small screen, set the elements flex-basis to 40%. This makes the total number of items per row 2. (Any number between 33% and 49% will do).
On the media query, set them to 30% (any number between 33 and 25 will do).
To move the last item to the left, add 2 empty elements
.deals {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.deal {
flex-basis: 40%;
flex-grow: 1;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 1025px) {
/* adjust to 3 columns */
.deal {
flex-basis: 30%;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
<div class="deal"></div>
<div class="deal"></div>
</div>answered Nov 24 '18 at 12:19
valsvals
45.2k757109
For some reason, the flex basis properties and flex grow properties do not affect my images at all. In the media query and outside of it
– joseph chauvin
Nov 26 '18 at 16:21
Just simply writing display: flex displays all of my image columns onto the same line, I'm not sure why the flex basis and flex grow is not working.
– joseph chauvin
Nov 26 '18 at 16:24
Have you noticed that in the snippet I set flex-wrap: wrap; ?
– vals
Nov 26 '18 at 17:51
Oops! you're a genius... I finally got the layout I wanted, but I'm struggling with getting the layout to be 3 columns when its at 1025px or wider. I put the flex-basis: 30%; on .deals, but its still not changing. I even tried flex-wrap: nowrap; and that doesn't seem to work either.
– joseph chauvin
Nov 26 '18 at 20:07
Actually it's because I put the flex-wrap, and flex-basis inside a media query, and when I put the flex-basis inside the "1025px" media query, it is somehow being overridden by the first media query:
– joseph chauvin
Nov 26 '18 at 20:13
add a comment |
1
If you're searching for "column" layout, that seems a good fit for CSS Grid Layout.
This is the important piece here:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
To break it down:
display: grid; Gives us a grid container
grid-template-columns: Defines the column behavior for our grid
repeat( ... , ... ); Function to define a pattern for columns or rows, here for columns. First argument is the number of repetitions--either fixed or auto--and second argument is the value we
want to repeat.
(auto-fit, minmax(200px, 1fr))
auto-fitoptimizes the number of columns to the minimum and maximum constraints of the container. Here
using it with theminmax()function we define the minimum column
width as 200px, otherwise distribute the available width evenly. Play with this.
.deals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
text-align: center;
}
.deal img {
width: 80%;
height: 80%;
}<div class="deals">
<div class="deal">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>edited Nov 27 '18 at 23:17
TylerH
15.8k105368
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
add a comment |
0
I suppose that's what you want.
.deals {
text-align: center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.deal {
width:100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) and (max-width:1025px) {
.deals {
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 720px) {
/* columns for home page */
.deals {
display: grid;
grid-template-columns:1fr;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454989%2fhow-do-i-make-columns-with-css-flexbox-that-include-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
For the small screen, set the elements flex-basis to 40%. This makes the total number of items per row 2. (Any number between 33% and 49% will do).
On the media query, set them to 30% (any number between 33 and 25 will do).
To move the last item to the left, add 2 empty elements
.deals {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.deal {
flex-basis: 40%;
flex-grow: 1;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 1025px) {
/* adjust to 3 columns */
.deal {
flex-basis: 30%;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
<div class="deal"></div>
<div class="deal"></div>
</div>answered Nov 24 '18 at 12:19
valsvals
45.2k757109
For some reason, the flex basis properties and flex grow properties do not affect my images at all. In the media query and outside of it
– joseph chauvin
Nov 26 '18 at 16:21
Just simply writing display: flex displays all of my image columns onto the same line, I'm not sure why the flex basis and flex grow is not working.
– joseph chauvin
Nov 26 '18 at 16:24
Have you noticed that in the snippet I set flex-wrap: wrap; ?
– vals
Nov 26 '18 at 17:51
Oops! you're a genius... I finally got the layout I wanted, but I'm struggling with getting the layout to be 3 columns when its at 1025px or wider. I put the flex-basis: 30%; on .deals, but its still not changing. I even tried flex-wrap: nowrap; and that doesn't seem to work either.
– joseph chauvin
Nov 26 '18 at 20:07
Actually it's because I put the flex-wrap, and flex-basis inside a media query, and when I put the flex-basis inside the "1025px" media query, it is somehow being overridden by the first media query:
– joseph chauvin
Nov 26 '18 at 20:13
add a comment |
1
For the small screen, set the elements flex-basis to 40%. This makes the total number of items per row 2. (Any number between 33% and 49% will do).
On the media query, set them to 30% (any number between 33 and 25 will do).
To move the last item to the left, add 2 empty elements
.deals {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.deal {
flex-basis: 40%;
flex-grow: 1;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 1025px) {
/* adjust to 3 columns */
.deal {
flex-basis: 30%;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
<div class="deal"></div>
<div class="deal"></div>
</div>answered Nov 24 '18 at 12:19
valsvals
45.2k757109
For some reason, the flex basis properties and flex grow properties do not affect my images at all. In the media query and outside of it
– joseph chauvin
Nov 26 '18 at 16:21
Just simply writing display: flex displays all of my image columns onto the same line, I'm not sure why the flex basis and flex grow is not working.
– joseph chauvin
Nov 26 '18 at 16:24
Have you noticed that in the snippet I set flex-wrap: wrap; ?
– vals
Nov 26 '18 at 17:51
Oops! you're a genius... I finally got the layout I wanted, but I'm struggling with getting the layout to be 3 columns when its at 1025px or wider. I put the flex-basis: 30%; on .deals, but its still not changing. I even tried flex-wrap: nowrap; and that doesn't seem to work either.
– joseph chauvin
Nov 26 '18 at 20:07
Actually it's because I put the flex-wrap, and flex-basis inside a media query, and when I put the flex-basis inside the "1025px" media query, it is somehow being overridden by the first media query:
– joseph chauvin
Nov 26 '18 at 20:13
add a comment |
1
1
1
For the small screen, set the elements flex-basis to 40%. This makes the total number of items per row 2. (Any number between 33% and 49% will do).
On the media query, set them to 30% (any number between 33 and 25 will do).
To move the last item to the left, add 2 empty elements
.deals {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.deal {
flex-basis: 40%;
flex-grow: 1;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 1025px) {
/* adjust to 3 columns */
.deal {
flex-basis: 30%;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
<div class="deal"></div>
<div class="deal"></div>
</div>answered Nov 24 '18 at 12:19
valsvals
45.2k757109
For the small screen, set the elements flex-basis to 40%. This makes the total number of items per row 2. (Any number between 33% and 49% will do).
On the media query, set them to 30% (any number between 33 and 25 will do).
To move the last item to the left, add 2 empty elements
.deals {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.deal {
flex-basis: 40%;
flex-grow: 1;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 1025px) {
/* adjust to 3 columns */
.deal {
flex-basis: 30%;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
<div class="deal"></div>
<div class="deal"></div>
</div>.deals {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.deal {
flex-basis: 40%;
flex-grow: 1;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 1025px) {
/* adjust to 3 columns */
.deal {
flex-basis: 30%;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
<div class="deal"></div>
<div class="deal"></div>
</div>.deals {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.deal {
flex-basis: 40%;
flex-grow: 1;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 1025px) {
/* adjust to 3 columns */
.deal {
flex-basis: 30%;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
<div class="deal"></div>
<div class="deal"></div>
</div>answered Nov 24 '18 at 12:19
valsvals
45.2k757109
answered Nov 24 '18 at 12:19
valsvals
45.2k757109
answered Nov 24 '18 at 12:19
valsvals
45.2k757109
answered Nov 24 '18 at 12:19
valsvals
45.2k757109
45.2k757109
For some reason, the flex basis properties and flex grow properties do not affect my images at all. In the media query and outside of it
– joseph chauvin
Nov 26 '18 at 16:21
Just simply writing display: flex displays all of my image columns onto the same line, I'm not sure why the flex basis and flex grow is not working.
– joseph chauvin
Nov 26 '18 at 16:24
Have you noticed that in the snippet I set flex-wrap: wrap; ?
– vals
Nov 26 '18 at 17:51
Oops! you're a genius... I finally got the layout I wanted, but I'm struggling with getting the layout to be 3 columns when its at 1025px or wider. I put the flex-basis: 30%; on .deals, but its still not changing. I even tried flex-wrap: nowrap; and that doesn't seem to work either.
– joseph chauvin
Nov 26 '18 at 20:07
Actually it's because I put the flex-wrap, and flex-basis inside a media query, and when I put the flex-basis inside the "1025px" media query, it is somehow being overridden by the first media query:
– joseph chauvin
Nov 26 '18 at 20:13
add a comment |
For some reason, the flex basis properties and flex grow properties do not affect my images at all. In the media query and outside of it
– joseph chauvin
Nov 26 '18 at 16:21
Just simply writing display: flex displays all of my image columns onto the same line, I'm not sure why the flex basis and flex grow is not working.
– joseph chauvin
Nov 26 '18 at 16:24
Have you noticed that in the snippet I set flex-wrap: wrap; ?
– vals
Nov 26 '18 at 17:51
Oops! you're a genius... I finally got the layout I wanted, but I'm struggling with getting the layout to be 3 columns when its at 1025px or wider. I put the flex-basis: 30%; on .deals, but its still not changing. I even tried flex-wrap: nowrap; and that doesn't seem to work either.
– joseph chauvin
Nov 26 '18 at 20:07
Actually it's because I put the flex-wrap, and flex-basis inside a media query, and when I put the flex-basis inside the "1025px" media query, it is somehow being overridden by the first media query:
– joseph chauvin
Nov 26 '18 at 20:13
For some reason, the flex basis properties and flex grow properties do not affect my images at all. In the media query and outside of it
– joseph chauvin
Nov 26 '18 at 16:21
For some reason, the flex basis properties and flex grow properties do not affect my images at all. In the media query and outside of it
– joseph chauvin
Nov 26 '18 at 16:21
Just simply writing display: flex displays all of my image columns onto the same line, I'm not sure why the flex basis and flex grow is not working.
– joseph chauvin
Nov 26 '18 at 16:24
Just simply writing display: flex displays all of my image columns onto the same line, I'm not sure why the flex basis and flex grow is not working.
– joseph chauvin
Nov 26 '18 at 16:24
Have you noticed that in the snippet I set flex-wrap: wrap; ?
– vals
Nov 26 '18 at 17:51
Have you noticed that in the snippet I set flex-wrap: wrap; ?
– vals
Nov 26 '18 at 17:51
Oops! you're a genius... I finally got the layout I wanted, but I'm struggling with getting the layout to be 3 columns when its at 1025px or wider. I put the flex-basis: 30%; on .deals, but its still not changing. I even tried flex-wrap: nowrap; and that doesn't seem to work either.
– joseph chauvin
Nov 26 '18 at 20:07
Oops! you're a genius... I finally got the layout I wanted, but I'm struggling with getting the layout to be 3 columns when its at 1025px or wider. I put the flex-basis: 30%; on .deals, but its still not changing. I even tried flex-wrap: nowrap; and that doesn't seem to work either.
– joseph chauvin
Nov 26 '18 at 20:07
Actually it's because I put the flex-wrap, and flex-basis inside a media query, and when I put the flex-basis inside the "1025px" media query, it is somehow being overridden by the first media query:
– joseph chauvin
Nov 26 '18 at 20:13
Actually it's because I put the flex-wrap, and flex-basis inside a media query, and when I put the flex-basis inside the "1025px" media query, it is somehow being overridden by the first media query:
– joseph chauvin
Nov 26 '18 at 20:13
add a comment |
1
If you're searching for "column" layout, that seems a good fit for CSS Grid Layout.
This is the important piece here:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
To break it down:
display: grid; Gives us a grid container
grid-template-columns: Defines the column behavior for our grid
repeat( ... , ... ); Function to define a pattern for columns or rows, here for columns. First argument is the number of repetitions--either fixed or auto--and second argument is the value we
want to repeat.
(auto-fit, minmax(200px, 1fr))
auto-fitoptimizes the number of columns to the minimum and maximum constraints of the container. Here
using it with theminmax()function we define the minimum column
width as 200px, otherwise distribute the available width evenly. Play with this.
.deals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
text-align: center;
}
.deal img {
width: 80%;
height: 80%;
}<div class="deals">
<div class="deal">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>edited Nov 27 '18 at 23:17
TylerH
15.8k105368
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
add a comment |
1
If you're searching for "column" layout, that seems a good fit for CSS Grid Layout.
This is the important piece here:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
To break it down:
display: grid; Gives us a grid container
grid-template-columns: Defines the column behavior for our grid
repeat( ... , ... ); Function to define a pattern for columns or rows, here for columns. First argument is the number of repetitions--either fixed or auto--and second argument is the value we
want to repeat.
(auto-fit, minmax(200px, 1fr))
auto-fitoptimizes the number of columns to the minimum and maximum constraints of the container. Here
using it with theminmax()function we define the minimum column
width as 200px, otherwise distribute the available width evenly. Play with this.
.deals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
text-align: center;
}
.deal img {
width: 80%;
height: 80%;
}<div class="deals">
<div class="deal">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>edited Nov 27 '18 at 23:17
TylerH
15.8k105368
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
add a comment |
1
1
1
If you're searching for "column" layout, that seems a good fit for CSS Grid Layout.
This is the important piece here:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
To break it down:
display: grid; Gives us a grid container
grid-template-columns: Defines the column behavior for our grid
repeat( ... , ... ); Function to define a pattern for columns or rows, here for columns. First argument is the number of repetitions--either fixed or auto--and second argument is the value we
want to repeat.
(auto-fit, minmax(200px, 1fr))
auto-fitoptimizes the number of columns to the minimum and maximum constraints of the container. Here
using it with theminmax()function we define the minimum column
width as 200px, otherwise distribute the available width evenly. Play with this.
.deals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
text-align: center;
}
.deal img {
width: 80%;
height: 80%;
}<div class="deals">
<div class="deal">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>edited Nov 27 '18 at 23:17
TylerH
15.8k105368
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
If you're searching for "column" layout, that seems a good fit for CSS Grid Layout.
This is the important piece here:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
To break it down:
display: grid; Gives us a grid container
grid-template-columns: Defines the column behavior for our grid
repeat( ... , ... ); Function to define a pattern for columns or rows, here for columns. First argument is the number of repetitions--either fixed or auto--and second argument is the value we
want to repeat.
(auto-fit, minmax(200px, 1fr))
auto-fitoptimizes the number of columns to the minimum and maximum constraints of the container. Here
using it with theminmax()function we define the minimum column
width as 200px, otherwise distribute the available width evenly. Play with this.
.deals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
text-align: center;
}
.deal img {
width: 80%;
height: 80%;
}<div class="deals">
<div class="deal">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>.deals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
text-align: center;
}
.deal img {
width: 80%;
height: 80%;
}<div class="deals">
<div class="deal">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>.deals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
text-align: center;
}
.deal img {
width: 80%;
height: 80%;
}<div class="deals">
<div class="deal">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>edited Nov 27 '18 at 23:17
TylerH
15.8k105368
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
edited Nov 27 '18 at 23:17
TylerH
15.8k105368
edited Nov 27 '18 at 23:17
TylerH
15.8k105368
edited Nov 27 '18 at 23:17
TylerH
15.8k105368
15.8k105368
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
answered Nov 24 '18 at 5:20
stealththeninjastealththeninja
1,86411427
1,86411427
add a comment |
add a comment |
0
I suppose that's what you want.
.deals {
text-align: center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.deal {
width:100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) and (max-width:1025px) {
.deals {
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 720px) {
/* columns for home page */
.deals {
display: grid;
grid-template-columns:1fr;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
add a comment |
0
I suppose that's what you want.
.deals {
text-align: center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.deal {
width:100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) and (max-width:1025px) {
.deals {
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 720px) {
/* columns for home page */
.deals {
display: grid;
grid-template-columns:1fr;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
add a comment |
0
0
0
I suppose that's what you want.
.deals {
text-align: center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.deal {
width:100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) and (max-width:1025px) {
.deals {
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 720px) {
/* columns for home page */
.deals {
display: grid;
grid-template-columns:1fr;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
I suppose that's what you want.
.deals {
text-align: center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.deal {
width:100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) and (max-width:1025px) {
.deals {
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 720px) {
/* columns for home page */
.deals {
display: grid;
grid-template-columns:1fr;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>.deals {
text-align: center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.deal {
width:100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) and (max-width:1025px) {
.deals {
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 720px) {
/* columns for home page */
.deals {
display: grid;
grid-template-columns:1fr;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>.deals {
text-align: center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.deal {
width:100%;
}
.deal img {
width: 80%;
height: 80%;
}
@media (min-width: 720px) and (max-width:1025px) {
.deals {
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 720px) {
/* columns for home page */
.deals {
display: grid;
grid-template-columns:1fr;
}
}<div class="deals clearfix">
<div class="deal_1 deal clearfix">
<h2>Guitars <span class="orange-word">40%</span> off</h2>
<img alt="electric guitar" src="img/guitar-deal.jpg">
</div>
<div class="deal_2 deal clearfix">
<h2><span class="orange-word">$200</span> Amplifier</h2>
<img alt="amplifier" src="img/amplifier-deal.jpg">
</div>
<div class="deal_3 deal clearfix">
<h2><span class="orange-word">$100</span> Microphone</h2>
<img alt="Microphone" src="img/mircophone-set-deal.jpg">
</div>
</div>answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
answered Nov 24 '18 at 19:20
Dogukan CavusDogukan Cavus
3,0541426
3,0541426
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454989%2fhow-do-i-make-columns-with-css-flexbox-that-include-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you’re looking for “columns”, have you played with CSS grid—either to replace or use with flexbox?
– stealththeninja
Nov 24 '18 at 4:22