This question already has answers here:
flex-grow not sizing flex items as expected
(5 answers)
Closed 5 years ago.
I have two flex rows. First row has 6 equal columns with flex: 1. Second row has column with flex: 4 and column with flex:2. Columns have margin-right: 10px set, except for last child in a row.
http://jsbin.com/gufihoyaha/edit?html,css,output
.row {
display: flex;
}
.row .col {
margin-right: 10px;
background-color: coral;
}
.row .col:last-child {
margin-right: 0;
}
.flex-1 {
flex: 1;
}
.flex-4 {
flex: 4;
}
.flex-2 {
flex: 2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
</div>
<div class="row">
<div class="col flex-4">4</div>
<div class="col flex-2">2</div>
</div>
</body>
</html>
But the result differs from what I expected:
What I want is something like this:
Question:
Why does it happen and how to fix that?
Only display:grid would actually be able to do this correctly:
unfortunately, at this time, it is quiet new and not implemented every where. See http://caniuse.com/#search=grid
To know more about it : https://css-tricks.com/snippets/css/complete-guide-grid/
.row {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.row .col {
background-color: coral;
margin-right: 10px;
}
.row .col:last-child {
margin-right: 0;
}
.flex-1 {}
.flex-4 {
grid-column: auto / span 4;
}
.flex-2 {
grid-column: auto / span 2;
}
<div class="row">
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
</div>
<div class="row">
<div class="col flex-4">4</div>
<div class="col flex-2">2</div>
</div>
Related
I'm trying to make a 3 column grid where the 2nd column extends both Col-1 and Col-3 I've specifically made an image to show a better representation of what I'm trying to do.
I'm using bootstrap 5 and I've read their page on grid layout and offsets but I still yet to get my head around how to do this.
I keep getting stuck on how to extend the 2nd column through to the 3rd one.
I've done 0 CSS for this AT the current moment and there is nothing else in the code that interacts with the static content part of the page. So it is very easy to replicate.
My current code:
<!--Static Content-->
<div class="" id="static-content-container" style="background-color: yellow;">
<div class="row">
<div class="col-md-9">
<p>Column 1</p>
</div>
<div class="col-md">
<p>Column 2</p>
</div>
<div class="col-md-9">
<p>Column 3</p>
</div>
</div>
<!--/Static Content-->
If I missed something here for you to replicate the same as I have please let me know what you need and I'll happily provide that for you.
I think the only way to do this with flex would be to change your html structure and group columns one and three and use display: contents:
.row {
display: flex;
width: 100%;
}
.col-wrapper {
width: 50%;
display: flex;
flex-direction: column;
}
.col-2 {
flex-grow: 1;
background: green;
}
#media screen and (max-width:768px) {
.row {
flex-direction: column;
}
.col-wrapper {
display: contents;
width: 100%;
}
.col-1 {
order: 1;
}
.col-2 {
order: 2;
}
.col-3 {
order: 3;
}
}
<div class="row">
<div class="col-wrapper">
<div class="col col-1">col 1</div>
<div class="col col-3">col 3</div>
</div>
<div class="col-wrapper">
<div class="col col-2">col 2</div>
</div>
</div>
If you can't change the html structure, you're probably better off using css grid:
#media screen and (min-width: 768px) {
.wrapper {
display:grid;
grid-template-columns: repeat(2, 50%);
grid-gap:10px;
}
.col-2 {
background: green;
grid-row: 1 / 3;
grid-column: 2;
}
}
<div class="wrapper">
<div class="col-1">
col1
</div>
<div class="col-2">
col2
</div>
<div class="col-3">
col3
</div>
</div>
with Bootstrap and its layout system is it possible to have rows in columns to produce this type of result :
I tried this but without success :
<div className="col-lg-3 col-12">
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
</div>
<div className="col-lg-9 col-12">
<div className="row">
<displayBigSquare />
</div>
<div className="row">
<displaySquare />
<displaySquare />
</div>
</div>
ty
UPDATE (23/08/2021):
it's actually better with grid. I dropped bootstrap and I use GRID instead which allows to define all the properties related to CSS grids (GRID explanations on https://developer.mozilla.org/fr/docs/Web/CSS/grid).
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Griiiiid!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 class="centre">Welcome</h1>
<div class="container">
<div class="items item1">1</div>
<div class="items item2">2</div>
<div class="items item3">3</div>
<div class="items item4">4</div>
<div class="items item5">5</div>
<div class="items item6">6</div>
</div>
</body>
</html>
CSS code:
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #333;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
color: salmon;
}
.centre {
text-align: center;
}
.container {
padding: 30px ;
width: 100%;
background-color: #eee;
margin: 30px auto;
display: grid;
grid-template-rows: 150px;
grid-template-columns: repeat (3, 150px);
grid-auto-rows: 150px;
gap: 30px;
}
.items {
padding: 20px;
font-size: 30px;
font-family: sans-serif;
}
.item1 {
background-color: lightcoral;
}
.item2 {
grid-row: 1/3;
grid-column: 2/4;
background-color: lightgreen;
}
.item3 {
background-color: lime;
}
.item4 {
background-color: chocolate;
}
.item5 {
background-color: darkgoldenrod;
}
.item6 {
background-color: darkseagreen;
}
Result:
As of Bootstrap v5.0.2, the answer is no. The issue is that in order to have the orange rectangle in your example span multiple "rows", you need to use CSS Grid styling, and that is not yet part of Bootstrap.
However, very soon in v5.1.0, they are including an opt-in option to replace the flexbox-based grid system they currently use with a CSS Grid-based one instead. It will probably have some growing pains, and I'm not sure that they have support for doing what you're trying to do here just yet, but at least CSS Grid will be there to try out. There will be documentation added for how to enable the option and how to use it once that version goes live, but you can read through the feature's PR in the meantime.
If you are wanting that exact layout, then you would have to do it in two rows:
The margin bottom of the square need to equal double your gutter
.square {
width: 100%;
padding-top: 100%;
background: orange;
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4">
<div class="square"></div>
<div class="square"></div>
</div>
<div class="col-8">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
</div>
</div>
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 3 years ago.
As the picture describes, I want to wrap items as such.
This is my current HTML and CSS.
<div class="column-container">
<div class="col item">1 <- More text and thus taller than the other ones</div>
<div class="col item">2</div>
<div class="col item">3</div>
<div class="col item">4</div>
<div class="col item">5</div>
</div>
.column-container {
display: flex;
justify-content: center;
flex-flow: row wrap;
height: 100%;
}
.item {
height: fit-content;
min-width: 300px;
max-width: 300px;
margin: 10px;
}
Here's a fiddle as well..
https://jsfiddle.net/3Ly5zh4n/1
Flexbox is probably not the best choice for this since flexbox is used to display content next to each other either vertical or horizontal. I'd suggest using CSS Grid instead. It might be a new area for some, but it's a quite good choice for handling columns in CSS.
The following is an example of how it can be used. The method repeat(auto-fill, ...) fills the whole container with either a full fraction for each element, or the minimum width of 150px, which should be 300px in your case.
.column-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
height: 300px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
color: white;
background-color: red;
}
.item--first {
grid-row: 1 / span 2;
}
<div class="column-container">
<div class="item item--first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
I'd suggest reading css tricks A Complete Guide to Grid for further information. Hope this helps a bit.
.column-container {
display: flex;
flex-flow: row wrap;
height: 100%;
}
.item {
height: fit-content;
min-width: 150px;
max-width: 150px;
margin: 10px;
border: 1px solid black;
}
<div style="display: flex;justify-content: center">
<div class="column-container">
<div class="col item" style="height: 100px;">1 <- More text and thus taller than the other ones</div>
</div>
<div class="column-container">
<div class="col item">2</div>
<div class="col item">3</div>
<div class="col item">4</div>
<div class="col item">5</div>
</div>
</div>
I think this this will do what you want. Its a simpler approach but it behaves the way you explain in your requested image.
HTML:
<div>
<ul>
<!-- I have set the height of this li to 300px to demo the concept. -->
<li class="col item" style="height: 300px">
1 More text and thus taller than the other ones.
</li>
<li class="col item">2</li>
<li class="col item">3</li>
<li class="col item">4</li>
<li class="col item">5</li>
</ul>
</div>
CSS:
ul {
padding: 0;
}
ul .item {
list-style: none;
float: left;
height: 100px;
width: 300px;
margin: 10px;
border: 1px solid red;
}
This should give you a result of:
Result layout
Hope this helps...
I am being asked to generate html that looks like the mock up image below. I have some sample HTML and CSS that generate a grid of squares etc. I need to be able convert this grid to look like the mock up image attached below. Preferably would like to use CSS only but I am not limited to using only CSS. My snippet doesn't uses bootstrap but I have access to Bootstrap 4.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper div:nth-child(1) {
grid-column: 1/1;
grid-row: 1/5;
}
.wrapper div:nth-child(2) {
grid-column: 2/4;
grid-row: 1/3;
}
.wrapper div:nth-child(3) {
grid-column: 2/2;
grid-row: 3/5;
}
.wrapper div:nth-child(4) {
grid-column: 3/3;
grid-row: 3/5;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2,4);
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
My solution is close but the second row and third column doesn't match.
This can be done easily with the Bootstrap 4 grid system. The red border is for visualisation. From here you can add the correct padding/margin to the column contents.
<div class="container">
<div class="row">
<div class="col-3 red-border">
Block 1
</div>
<div class="col">
<div class="row">
<div class="col red-border">
Block 2
</div>
</div>
<div class="row">
<div class="col-4 red-border">
Block 3
</div>
<div class="col red-border">
Block 4
</div>
</div>
</div>
</div>
</div>
<style>
.red-border {
border: 1px solid red;
}
</style>
You can make this with Bootstrap grid
<div class="container">
<div class="row no-gutters">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
Find more details here : https://getbootstrap.com/docs/4.0/layout/grid/
Working on a CSS Grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server-side logic.
The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center-aligned inside its parent.
By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans the 2 columns of the grid.
How can the footer, being in the last implicit row, have a smaller size than the grid-auto-rows property, defined on the grid container?
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
The grid-auto-rows property only accepts track sizes as values. It does not accept any form of syntax that would allow you to target a particular row.
Therefore, another method is needed to size the grid item appearing in the last implicit row.
Here's a simple solution: Target the last item directly.
.photos-footer {
height: 50px;
}
And then, because you want the content of that item (the button) centered, use flexbox:
.photos-footer {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
Here's the full code:
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card > img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
height: 50px;
align-self: end; /* align item to bottom of row */
display: flex;
justify-content: center;
align-items: center;
grid-column: 1 / 3;
background-color: lightgreen;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
NOTE that this solution doesn't actually change the height of the last grid row, which remains at 200px, per the grid-auto-rows rule. This solution changes only the height of the grid item inside the last row. That's why there's a gap between the penultimate row and the grid item pinned to the bottom of the last row.
If the last row itself must have a different height, then I would suggest removing it from the grid container and placing it underneath as a new element.
NOTE also that the problem raised in the question applies only in the implicit grid. In the explicit grid, defining the height of the last row (or any row, for that matter) is simple and easy.
Maybe using grid-auto-rows: min-content; is fine here . grid-template-rows:50px; will only set first row's height.
height or max-height could be used on .photo-card if necessary.
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: min-content;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
</head>
<body>
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
</body>
</html>