I have been trying to show three columns per row. Is it possible using flexbox?
My current CSS is something like this:
.mainDiv {
display: flex;
margin-left: 221px;
margin-top: 43px;
}
This code puts all content in a single row.
I want to add a constraint to just shows three records per row.
This may be what you are looking for:
http://jsfiddle.net/L4L67/
body>div {
background: #aaa;
display: flex;
flex-wrap: wrap;
}
body>div>div {
flex-grow: 1;
width: 33%;
height: 100px;
}
body>div>div:nth-child(even) {
background: #23a;
}
body>div>div:nth-child(odd) {
background: #49b;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Even though the above answer appears to be correct, I wanted to add a (hopefully) more readable example that also stays in 3 columns form at different widths:
.flex-row-container {
background: #aaa;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.flex-row-container > .flex-row-item {
flex: 1 1 30%; /*grow | shrink | basis */
height: 100px;
}
.flex-row-item {
background-color: #fff4e6;
border: 1px solid #f76707;
}
<div class="flex-row-container">
<div class="flex-row-item">1</div>
<div class="flex-row-item">2</div>
<div class="flex-row-item">3</div>
<div class="flex-row-item">4</div>
<div class="flex-row-item">5</div>
<div class="flex-row-item">6</div>
</div>
Hope this helps someone else.
Try this one using Grid Layout:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
You can now use grid-auto-flow
https://jsfiddle.net/chalcrow/bqye79kr/1/
CSS
.grid-flow {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
Note - the repeat(3, 1fr) means '3 columns, each taking up 1 (equal) fraction of the available space.
HTML
<div class="grid-flow">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Result
Related
Lets say I have a grid of elements like this, this is simple CSS grid
Any way I can set margin for the second row of this grid like this?
I've tried to control elements via nth-child, but it messed up first row.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
overflow-x: scroll;
margin: 0 -18px 10px;
gap: 14px;
width: auto;
height: auto;
padding: 13px 0;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 146px;
width: 130px;
background-color: #f0f0f0;
border-radius: 27px;
text-align: center;
letter-spacing: 0px;
color: #082b26;
opacity: 1;
padding: 0 20px;}
<div class="wrapper">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
</div>
It is only possible if you know the exact amount of columns. Then you can target the elements of the 2nd row with nth-child and add a margin to them to offset them from their normal placement.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
padding: 50px;
}
.grid > div:nth-child(n+4):not(:nth-child(n+7)) {
margin-left: 50px;
margin-right: -50px;
}
/* for vizualisation only */
.grid > div {
border: 1px solid black;
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
I'm trying to make a layout like this:
Here's my code:
.grid{
display: grid;
background: gray;
grid-gap: 15px;
justify-content: center
align-items: center;
grid-template-columns: repeat(2, auto);
grid-auto-rows: minmax(50px, auto);
}
.sidebar{
grid-column: 1/2;
background-color: white;
align-items: center;
justify-content: center;
width: 300px;
}
.navbar{
grid-column: 2/3;
background-color: white;
height: 50px;
}
.section2{
grid-column: 2/3;
background-color: white;
height: 300px;
}
.section4{
grid-column: 2/3;
background-color: white;
height: 300px;
}
.section3{
grid-column: 1/2;
background-color: white;
height: 200px;
align-items: center;
width: 300px;
}
.section5{
grid-column: 1/2;
background-color: white;
height: 100px;
align-items: center;
width: 300px;
}
<div class="grid">
<div class="sidebar">sidebar</div>
<div class="navbar">navbar</div>
<div class="section2">section2</div>
<div class="section3">section3</div>
<div class="section4">section4</div>
<div class="section5">section5</div>
</div>
The output is shown here:
I highlighted in red some big problems, I have these massive gaps in between sections, and my columns aren't being centered in the grid I tried adding "justify-content: center" and "align-items: center" but none of those centered the sidebar sections and I have no clue how to reduce the gap in between the sections. How can I fix my code so it looks more like the layout in my mockup?
It's complicated because with CSS Grid you have a grid...
For your layout you must divide them on two sections like this:
<div class="grid">
<div class="left">
<aside class="sidebar">sidebar</aside>
<section class="section2">section2</section>
<section class="section4">section4</section>
</div>
<div class="right">
<nav class="navbar">navbar</nav>
<section class="section3">section3</section>
<section class="section5">section5</section>
</div>
</div>
https://codepen.io/tasmim-concept/pen/mdrxLOR
.grid-container1 {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-template-rows: 100%;
border: 1px solid pink;
background-color: grey;
}
.grid-container2 {
display: grid;
grid-template-columns: 75%;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-template-rows: 100%;
border: 1px solid pink;
background-color: grey;
}
.one {
background-color: aqua;
}
.two {
background-color: beige;
}
.three {
background-color: orangered;
}
<div class="grid-container1">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="grid-container2">
<div></div>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
Grid-container = GC.
Grid-item = GI.
The first GC successfully allows me to add any number of GIs and have each GI take up an equal amount of space.
At some point (using a media-query) I want the layout to look like I have in GC2 - any number of background-color'd GIs equally take up the last 25% of the width of their GC. But notice how I have to introduce an empty GI, it's cell spanning 75% of GC width, at the start in order to achieve this. To me, this seems annoying as I'd have to use JavaScript. Is there anyway I can achieve what I want just using CSS?
EDIT
Just thought of this idea: keep my empty div and just set its display: block/none when I need it, changing grid-auto-columns: initial/75% when I need it too. Thoughts?
Pseudo element can help here. Resize the screen to see the result:
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
border: 1px solid pink;
background-color: grey;
}
#media (min-width:800px) {
.grid-container {
grid-template-columns: 75%;
}
.grid-container::before {
content: "";
}
}
.grid-container :nth-child(odd) {
background-color: aqua;
}
.grid-container :nth-child(even) {
background-color: beige;
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Another idea is to simply use padding since it's supposed to be an empty space:
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
border: 1px solid pink;
background-color: grey;
}
#media (min-width:800px) {
.grid-container {
padding-left: 75%;
}
}
.grid-container :nth-child(odd) {
background-color: aqua;
}
.grid-container :nth-child(even) {
background-color: beige;
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
You can use CSS-Grid's concept grid-areas to achieve this in Pure CSS.
Codepen Link : https://codepen.io/emmeiWhite/pen/gOwzdar
.grid-container1 {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-template-rows: 100%;
border: 1px solid pink;
background-color: grey;
}
/* You can use CSS-Grid. Grid-Areas*/
.grid-container2 {
display: grid;
grid-template-columns:repeat(12,1fr);
background:#777;
grid-template-areas:
". . . . . . . . . one-2 two-2 three-2"
}
.one,.one-2{
background-color: aqua;
}
.two,.two-2 {
background-color: beige;
}
.three,.three-2 {
background-color: orangered;
}
/* --- CSS-Grids -- */
.one-2{
grid-area:one-2;
}
.two-2{
grid-area:two-2;
}
.three-2{
grid-area:three-2;
}
<div class="grid-container1">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="grid-container2">
<div class="one-2">1</div>
<div class="two-2">2</div>
<div class="three-2">3</div>
</div>
I am trying to build a container like bootstrap container that has padding from page sides.
Since I'm new in this topic, i really don't think this is the best way to create responsive and standard container.
i just want to know is there any other ways to do something like my project.
<div class="container">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
.container{
width: 75%;
height: auto;
background: red;
margin: 0 auto;
padding: 1px;
}
this is how i created a responsive container with grid
/* white space from sides */
.container {
display: grid;
grid-template-columns: 80px 1fr 80px;
grid-gap: 2px;
}
.container > .grid-system {
grid-column: 2;
min-width: 0;
}
/* inner grid 12 column */
.grid-system {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 10px;
background: green;
}
.grid-system > div{
background: red;
grid-column: 1;
padding: 12px 16px;
text-align: center;
color: white;
}
<div class="container">
<div class="grid-system">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
I am creating a dynamic site where there is a parent div and children divs (they are variable in width) inside the parent one and trying to make this :
when a new div is created it is pushed downward until it the parents height is filled then start a new column and such as:
IMAGE:
<style>
.parent {
height: 800px;
width: 100%;
overflow-y: hidden;
border: 1px solid black;
}
.child1 {
background-color: blue;
height: 150px;
width: 150px;
}
.child1 {
background-color: red;
height: 150px;
width: 300px;
}
</style>
<div class="parent">
<div class="child1"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS's display: grid is a solution for the layout described in the attached image:
.parent {
height: 800px;
width: 100%;
border: 1px solid black;
display: grid;
grid-gap: 2px;
grid-auto-columns: 150px;
grid-template-rows: repeat(4, 1fr);
grid-auto-flow: column;
color: white;
}
.child1 {
background-color: blue;
}
.child2 {
background-color: red;
grid-column: span 2;
}
The grid:
display: grid; to enable grid layout on the container.
grid-gap: 2px;specifies a gap of 2px between rows and columns in the grid.
grid-auto-columns: 150px; columns in the grid should be 150px wide.
grid-template-rows: repeat(4, 1fr); the grid will contain 4 rows of equals height.
grid-auto-flow: column; a new column will be created when the content reaches the bottom of the container.
The grid elements:
Without any additional css the blue elements will each occupy a cell in the grid 1 row tall and 1 column wide.
.child2 {
background-color: red;
grid-column: span 2;
}
The red elements will span over 2 columns.
Working fiddle here