I would like to make a responsive table layout with DIVs that has two columns and the second column is split into two equal rows so it looks like this.
You can use CSS Flex with flex: 1 and flex: 2
.container {
display: flex;
width: 100%;
height: 300px;
flex-wrap: wrap;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
}
.button {
flex: 1;
color: white;
}
.button.rowspan {
flex: 2;
}
<div class="container">
<div class="column">
<div class="button rowspan" style="background: red;">
Column 1 - rowspan
</div>
</div>
<div class="column">
<div class="button" style="background: green">
Column 2
</div>
<div class="button" style="background: orange">
Column 3
</div>
</div>
</div>
Would be nice to see your attempt of doing it yourself. You can use CSS grid to build responsive layouts:
<html>
<div class="grid">
<div class="left">
</div>
<div class="right-up">
</div>
<div class= "right-down">
</div>
</div>
</html>
CSS:
.grid {
display: grid;
position: absolute;
top: 0;
left: 0;
grid-template-columns: 50vw 50vw;
grid-template-rows: 50vh 50vh;
grid-template-areas:
"left right-up"
"left right-down";
}
.left {
grid-area: left;
background-color: blue;
}
.right-up {
grid-area: right-up;
background-color: green;
}
.right-down{
grid-area: right-down;
background-color: red;
}
JSfiddle: JSfiddle link
Related
I am trying to create a flexbox grid which should look like that
The basic grid layout is pretty easy to create, but I have a very hard time adding the spacing between the elements. As you can see in the code snippet, the spacing in the second line is not working properly.
#flexContainer {
display: flex;
flex-direction: column;
gap: 16px;
height: 200px;
width: 600px;
}
.rowContainer {
display: flex;
flex-direction: row;
gap: 16px;
}
.thirdElement {
flex-grow: 1;
height: 40px;
background-color: red;
}
.twoThirdsElement {
flex-grow: 2;
height: 40px;
background-color: red;
}
<div id="flexContainer">
<div class="rowContainer">
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
</div>
<div class="rowContainer">
<div class="twoThirdsElement">
</div>
<div class="thirdElement">
</div>
</div>
</div>
This looks to me like a three column grid with the fourth item spanning two colums.
Here's a simplified version. Obviously you'll want to style the items as you need them.
#flexContainer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
height: 200px;
width: 600px;
}
#flexContainer>* {
background-color: red;
}
.twoThirdsElement {
grid-column: auto / span 2;
}
<div id="flexContainer">
<div>
</div>
<div>
</div>
<div>
</div>
<div class="twoThirdsElement">
</div>
<div>
</div>
</div>
Use CSS grid
#flexContainer {
display: flex;
flex-direction: column;
gap: 16px;
}
.rowContainer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.thirdElement {
height: 40px;
background-color: red;
}
.twoThirdsElement {
grid-column:span 2;
height: 40px;
background-color: red;
}
<div id="flexContainer">
<div class="rowContainer">
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
</div>
<div class="rowContainer">
<div class="twoThirdsElement">
</div>
<div class="thirdElement">
</div>
</div>
</div>
You not need to <div class="rowContainer">. It fixes only with one flex property for #flexContainer.
#flexContainer {
display: flex;
flex-wrap: wrap;
height: calc(80px + (600px / 20)); /* (600px/20) == 5% of 600px. result = 80px + 5%(600px). it is for a gap between rows that is equal with gap: 5%; for columns.*/
align-content: space-between;
gap: 5%;
width: 600px;
}
.thirdElement {
flex-basis: 30%;
height: 40px;
background-color: red;
}
.twoThirdsElement {
flex-basis: 65%;
height: 40px;
background-color: red;
}
<div id="flexContainer">
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="twoThirdsElement">
</div>
<div class="thirdElement">
</div>
</div>
Can I achieve this layout with flexbox with the below document structure?
I want the big <img> on the left with two smaller images on the right and wrapping.
This is what I did, with display: flex on gallery-container and flex-wrap.
.container {
height: 100%;
}
.container .gallery-container {
background-color: #f6f6f6;
display: flex;
flex-wrap: wrap;
width: 300px;
align-items: flex-start;
}
.container .gallery-container .gallery-big-image {
display: block;
width: 200px;
height: 200px;
background: lavender;
}
.container .gallery-container .gallery-small-img {
display: block;
width: 100px;
height: 100px;
background-color: purple;
}
<div class="container">
<div class="gallery-container">
<div class="gallery-big-image">big</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
</div>
</div>
(codepen)
The layout is clunky and inefficient with flexbox, for reasons explained here: CSS-only masonry layout
However, the layout is relatively simple and easy with CSS Grid.
No changes to HTML.
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
width: 300px;
background-color: #f6f6f6;
}
.gallery-big-image {
grid-column: span 2;
grid-row: span 2;
background: lavender;
}
.gallery-small-img {
background-color: purple;
color: white;
}
<div class="container">
<div class="gallery-container">
<div class="gallery-big-image">big</div>
<div class="gallery-small-img">small 1</div>
<div class="gallery-small-img">small 2</div>
<div class="gallery-small-img">small 3</div>
<div class="gallery-small-img">small 4</div>
<div class="gallery-small-img">small 5</div>
<div class="gallery-small-img">small 6 (continues wrapping)</div>
<div class="gallery-small-img">small 7 (continues wrapping)</div>
</div>
</div>
How about using grid layout instead?
.container {
height: 100%;
}
.gallery-container {
background-color: #f6f6f6;
width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.gallery-img {
background: purple;
width: 100px;
height: 100px;
}
.gallery-img-large {
background: lavender;
width: 200px;
height: 200px;
grid-column-start: 0;
grid-column-end: span 2;
grid-row-start: 0;
grid-row-end: span 2;
}
<div class="container">
<div class="gallery-container">
<div class="gallery-img-large">big</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
</div>
</div>
I need css styling for 2 columns. The first column should use the complete width and the second column next to it should use only the width it needs. How can i do that? Is there any way to do this with display: flex?
Example:
"-" = whitespace
if second column is display: none, the first column should use width 100%
[First-Column-------------------------------------------------------]
and if not
[First-Column------------------------------------------------][HELLO]
[First-Column-------------------------------------------][HELLOHELLO]
You can do this with flexbox. Just use flex: 1 for the first child and flex: 0 for the second.
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you hide the second child, the result looks like this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
display: none;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you want items with only width of the content you could use this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
justify-content: space-between;
}
.child1 {
background: red;
}
.child2 {
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
You can do this with below code:
.mainDiv, .mainDiv div{
display: block;
}
.mainDiv .firstDiv{
float: left;
width: 200px;
}
.mainDiv .secondDiv{
float: left;
width: calc(100% - 200px);
}
<div class="mainDiv">
<div class="firstDiv"> First Div </div>
<div class="secondDiv"> Second Div </div>
</div>
.main{
display:flex;
}
<div class="main">
<div>[First-Column------------------------------------------------]</div>
<div> [HELLO]</div>
</div>
I have a flex box layout. I want the width of .outer-2 to be the width of its children, with .outer-1 and outer-3 taking up the rest of the space.
How can I achieve this?
JSFiddle
.container {
display: flex;
}
.outer-1 {
background: red;
height: 100px;
flex: 1;
}
.outer-2 {
display: flex;
flex: 1;
}
.outer-3 {
background: blue;
height: 100px;
flex: 1;
}
.inner {
flex-basis: 30px;
background: green;
height: 100px;
margin: 0 3px;
}
<div class="container">
<div class="outer-1">
</div>
<div class="outer-2">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="outer-3">
</div>
</div>
You need to change the flex properties for the second child of container preventing it from growing to fit it's parent. That, and adding a width or min-width to each .inner element will prevent their parent from collapsing them down.
.container{
display: flex;
}
.outer-1{
background: red;
height: 100px;
flex: 1;
}
.outer-2{
display: flex;
flex: 1;
}
.outer-3{
background: blue;
height: 100px;
flex: 1;
}
.inner{
width: 30px;
flex: 1 0 30px;
background: green;
height: 100px;
margin: 0 3px;
}
<div class="container">
<div class="outer-1">
</div>
<div class="outer-2">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="outer-3">
</div>
</div>
I would like an intro section on the left side of a .container and a side bar on the right.
On the left side underneath the .intro section I want there to be four divs equally spaced like a grid.
I'm having problems with getting the "grid set up". I think part of the problem is that the parent has some flexbox attribute effecting the children.
Requirement : The intro section should be centered in the .left-side and the "grid" should not be centered the boxes should take up as much space as necessary to fit 2 on a row with margins in between. The .intro should be 80 percent of the width of the leftside.
I don't want to do any major changes to the structure this is just a small sample of how my project is set up.
.container{
width: 80%;
margin: 0 auto;
display: flex;
}
.left-side{
flex:8;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
.side-bar{
flex: 2;
height: 100vh;
background: powderblue;
}
.intro{
flex:3;
width:80%;
height: 300px;
background: skyblue;
}
.box{
background: red;
width: 45%;
height: 100px;
flex:4;
border:1px solid orange;
}
<div class="container">
<div class="left-side">
<div class="intro">
intro
</div>
<div class="recent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
<div class="side-bar">
sidebar
</div>
Flex items can also be flex containers. This enables you to nest multiple containers, with flex-direction: row or column, in a larger container.
For your layout, you can build a column consisting of two flex items. The first item (.intro) has 80% width and can be centered horizontally. The second item (.recent) can be a flex container with four items arranged in a 2x2 grid.
.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
height: 100vh;
}
.left-side {
flex: 4;
display: flex;
flex-direction: column;
}
.side-bar {
flex: 1;
background: powderblue;
}
.intro {
flex: 3;
height: 300px;
width: 80%;
margin: 0 auto;
background: skyblue;
}
.recent {
display: flex;
flex-wrap: wrap;
background-image: url("http://i.imgur.com/60PVLis.png");
background-size: contain;
}
.box {
margin: 5px;
flex-basis: calc(50% - 10px);
height: 100px;
box-sizing: border-box;
background: red;
}
body { margin: 0; }
<div class="container">
<div class="left-side">
<div class="intro">intro</div>
<div class="recent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
<div class="side-bar">
sidebar
</div>
</div>