I have been trying to get a layout where I have a column of 6, plus a column of 6 to the right with two vertical boxes in. I can achieve this no problem, but I'm struggling to get the heights of the two enclosed divs to stretch vertically using flexbox.
I'm using this example http://www.bootply.com/7UhIWMK808 and adapting. Here's what I have been working with. Any ideas?
(I have been trying a variety of flex-grow & flex-col on the second column - but nothing seems to have solved it as yet)
<div class="container"><h3></h3></div>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-6">
<div class="flex-col">
<div class="flex-grow" style="background: grey;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Sed ut perspiciatis unde omn eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Sed ut perspiciatis unde omn
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="">
<div class="" style="background: grey;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem ape
</div>
</div>
</div>
<div class="col-md-12">
<div class="">
<div class="" style="background: grey;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem ap
</div>
</div>
</div>
</div>
</div>
</div><!--/row-->
</div><!--/container-->
<hr>
Here's the the issue solved
<style>
.flex-container {
display: flex;
align-items: stretch;
}
.flex-column {
display: flex;
align-items: stretch;
flex-direction: column;
flex: 1;
}
.child {
flex: 1;
}
</style>
<div class="flex-container">
<div class="flex-column">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-column">
<div class="child">
lorem
</div>
<div class="child">
lorem
</div>
</div>
</div>
Related
I'm playing around with Bootstrap and considering using a single row and column wrapping for my design. The reason for this is because I want to reorder the elements depending on the screen size. Current code is as follows:
<div class="container">
<div class="row">
<div class="col-12 nav-bar">
Navigation
</div>
<div class="col-12 header">
Header
</div>
<div class="col-12 content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-6 feature sign-up">
Sign up
</div>
<div class="col-6 feature feature-1">
Feature 1
</div>
<div class="col-6 feature feature-2">
Feature 2
</div>
<div class="col-6 feature feature-3">
Feature 3
</div>
</div>
</div>
Is it possible to make the third column content the first column for the lg screen size? I see the order class lets you assign order based from 1-12. I tried using <div class="col-12 content order-md-1"> but it made it the last element, not the first.
The following css will do the trick.
You are basically implementing the order-first class manually but only for large screens
#media (min-width:1200px){
.content{
order:-1;
}
}
heres a codepen you can play with
https://codepen.io/mugwag/pen/VwvpNRV
I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid?
To be clear, I want equal height for all elements in a grid across all rows, not just per each row. Basically, the highest "cell" should dictate the height of all cells, not just the cells in its row.
Short Answer
If the goal is to create a grid with equal height rows, where the tallest cell in the grid sets the height for all rows, here's a quick and simple solution:
Set the container to grid-auto-rows: 1fr
How it works
Grid Layout provides a unit for establishing flexible lengths in a grid container. This is the fr unit. It is designed to distribute free space in the container and is somewhat analogous to the flex-grow property in flexbox.
If you set all rows in a grid container to 1fr, let's say like this:
grid-auto-rows: 1fr;
... then all rows will be equal height.
It doesn't really make sense off-the-bat because fr is supposed to distribute free space. And if several rows have content with different heights, then when the space is distributed, some rows would be proportionally smaller and taller.
Except, buried deep in the grid spec is this little nugget:
7.2.3. Flexible Lengths: the fr
unit
...
When the available space is infinite (which happens when the grid
container’s width or height is indefinite), flex-sized (fr) grid tracks are
sized to their contents while retaining their respective proportions.
The used size of each flex-sized grid track is computed by determining
the max-content size of each flex-sized grid track and dividing that
size by the respective flex factor to determine a “hypothetical 1fr
size”.
The maximum of those is used as the resolved 1fr length (the
flex fraction), which is then multiplied by each grid track’s flex
factor to determine its final size.
So, if I'm reading this correctly, when dealing with a dynamically-sized grid (e.g., the height is indefinite), grid tracks (rows, in this case) are sized to their contents.
The height of each row is determined by the tallest (max-content) grid item.
The maximum height of those rows becomes the length of 1fr.
That's how 1fr creates equal height rows in a grid container.
Why flexbox isn't an option
As noted in the question, equal height rows are not possible with flexbox.
Flex items can be equal height on the same row, but not across multiple rows.
This behavior is defined in the flexbox spec:
6. Flex Lines
In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.
In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the minimum height necessary to contain the flex items on the line.
The short answer is that setting grid-auto-rows: 1fr; on the grid container solves what was asked.
* {
box-sizing: border-box;
}
.container {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.description {
background: blue;
grid-column: 1 / span 4;
}
.col {
background: red;
}
<div class="container">
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
View on CodePen
I am trying to get a two column layout where left column has a fixed position. My problem is that the right column's content goes underneath the fixed one. Here is a basic structure:
<body style="overflow:auto">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 left">
1234
</div>
<div class="col-xs-10">
<div>
Content
</div>
</div>
</div>
</div>
</body>
CSS:
.left {
position: fixed;
z-index: 2;
width: 100px;
height: 100%;
background-color: #fff;
}
Fiddle
Just add margin-left:100px(width of the left div) to the second div.it should fix your problem
check this snippet
.left {
position: fixed;
z-index: 2;
width: 100px;
height: 100%;
background-color: red;
}
.col-xs-10 {
margin-left: 100px;
}
<body style="overflow:auto">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 left">
1234
</div>
<div class="col-xs-10">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumAt vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborumAt vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
</div>
</div>
</div>
</body>
Hope it helps
I'm trying to create a layout like this:
http://jsfiddle.net/LLbnhb9v/
Basically, A and C are sidebar items, and B is the main content:
My markup is as follows:
<div class="container">
<div class="col-sm-2">
A
</div>
<div class="col-sm-8">
B
</div>
<div class="col-sm-2">
C
</div>
</div>
This works for the mobile, but on the desktop C is positioned below B. How can I make B (the main content) "span" across multiple rows without any insane css tricks?
You need to have the pink section have the pull-right class and the green section to have a clearfix class.
http://jsfiddle.net/LLbnhb9v/19/
<div class="container">
<div class="col-sm-2">
<div class="x a">
short<br>text
</div>
</div>
<div class="col-sm-10 pull-right">
<div class="x b">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="x c">
short<br>text
<div>
</div>
</div>
I also changed the layout a little bit. The first level of divs should only worry about layout. If you add padding and margins and stuff then they can have some issues and not work as expected. I moved the a b c and x classes onto sub elements.
My three columns are not aligning properly with everything else? My header, footer, featured is all aligned but that's because it's a single div and not multiple.
demo: http://jsfiddle.net/Zevoxa/3LDUd/
<body>
<div id="header">
<h1>LOGO</h1>
<div id="nav">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="feature"><div style="text-align:center">
<p>Feature<p>
</div>
<div class="article column1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="article column2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="article column3">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
</div>
</div></div>
<div id="footer"><div style="text-align:center">
<p>© Copyright 2013</p>
</div></div>
</body>
</html>
http://jsfiddle.net/persianturtle/3LDUd/1/
You had the width set to 33.3px instead of percent.
.column1, .column2, .column3 {
background-color: #efefef;
width: 30%;
float: left;
margin: 10px;
display: inline-block;
}
I've made the widths of the articles 33% and instead put the 10px margin around the tag within it. Also added a clearer div, check it out here:
http://jsfiddle.net/dzHgX/
.column1, .column2, .column3 {
background-color: #efefef;
width: 33%;
float: left;
display: inline-block;
}
.column1 p, .column2 p, .column3 p {
margin: 10px;
}