This question already has an answer here:
Why are CSS named grid areas not in quotes?
(1 answer)
Closed 7 months ago.
I'm trying to create a grid layout with two boxes that I want to be in one line.
the result was :
.container {
display: grid;
grid-template-areas: "1 2 2";
}
.sidebar {
background-color: aqua;
grid-area: 1;
height: 50vh;
}
.content {
background-color: black;
grid-area: 2;
height: 50vh;
}
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
why it doesn't follow the template I designated
If you want to use numbers you need to prefix them with \3 but I don't really recommend
.container {
display: grid;
grid-template-areas: "1 2 2";
}
.sidebar {
background-color: aqua;
grid-area: \31;
height: 50vh;
}
.content {
background-color: black;
grid-area: \32;
height: 50vh;
}
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I don't believe you can use unescaped numbers as grid area names.
Just use letters instead.
.container {
display: grid;
grid-template-areas: "a b b"
}
.sidebar {
background-color: aqua;
grid-area: a;
height: 50vh;
}
.content {
background-color: black;
grid-area: b;
height: 50vh;
}
<div class="container">
<div class="sidebar">
</div>
<div class="content"></div>
</div>
Related
I have created flexbox to rearrange the boxes. Here is the demo code
The problem is that when I resize for smaller screen, I want to insert B between A and C.
How can I achieve that ? Thanks in advance.
grid is the grid-system you may need for this kind of layout.
here is a short example
/* let make a grid of 2 columns */
.main {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 20px;
}
/* b should span through 2 rows */
.b {
grid-row: span 2;
}
/* clear the grid system on small screen */
#media (max-width: 639px) {
.main {
display: block;
}
}
/* original styling for bg */
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
<div class="main">
<div class="a">A - I have some content</div>
<div class="b">B - I have some content</div>
<div class="c">C - I have some content</div>
</div>
As you can see, you may need little HTML and CSS to get this organized. Mind to set your media query in last position so it is not overridden ;)
see https://css-tricks.com/snippets/css/complete-guide-grid/ to dig further into grid
Here a solution that gather all classes a b and c in one container:
html code :
<div class="main">
<div class="container-1">
<div class="a">A - I have some content</div>
<div class="b">B - I have some content</div>
<div class="c">C - I have some content</div>
</div>
</div>
CSS code :
.a {
background-color: red;
height: 20px;
}
.b {
background-color: green;
height: 30px;
}
.c {
background-color: blue;
height: 20px;
}
.container-1 div{
width: 45%;
display: inline-block;
}
#media (max-width: 639px) {
.container-1 div {
width: 100%;
display: block;
}
}
I think it would be easier using grid instead flex:
HTML
<div class="main">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
CSS
.main {
display: grid; /* If you don't wanna add a gap between blocks, put this attribute into the media query */
gap: 1rem; /* To add a gap between blocks */
}
.a {
background: red;
}
.b {
background: green;
}
.c {
background: blue;
}
#media (min-width: 768px) {
.main {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.a {
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 2 / 3 / 3;
}
.c {
grid-area: 2 / 1 / 3 / 2;
}
}
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 6 months ago.
I am trying to do exactly this:
Where my mark up is:
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Is this possible with grid, bootstrap or flex? Without changing the order of elements?
I think it has a lot of way to do.
And one of that way is using grid. then use grid-template for solve this question
.container {
display: grid;
grid-template:
"a b"
"c b";
}
.a {
grid-area: a;
background: red;
}
.b {
grid-area: b;
background: blue;
}
.c {
grid-area: c;
background: green;
}
or using grid-area
.container {
display: grid;
}
.a {
background: red;
}
.b {
grid-area: 1 / 2 / 3;
background: blue;
}
.c {
background: green;
}
.wrapper {
height: 300px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
.wrapper div {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper div:nth-child(1) {
background-color: green;
}
.wrapper div:nth-child(2) {
grid-row: 2 span;
background-color: blue;
}
.wrapper div:nth-child(3) {
background-color: red;
}
<div class="wrapper">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Is that something you wanted to achive ? "Grid" is kind of made for this kind of situations.
As for bootstrap - last version uses "flex" as default.
Using one more div will be the solution, do the following.
Hope it is useful.
https://codepen.io/Olmedo12/pen/WNdGOMB
HTML
<div class="container">
<div class="subcontainer">
<div class="box blue">BOX 1</div>
<div class="box red">BOX 3</div>
</div>
<div class="box green">
Box 2
</div>
<div>
CSS
.container {
display: flex;
}
.box {
width: 60px;
height: auto;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed last year.
For the purpose of the diagram, I made parent_div smaller than the screen. However, it covers all the screen. Here are the code snippets of my HTML and CSS
HTMl:
#parent_div {
width: 100%;
height: 100vh;
display: grid;
}
<div id="parent_div">
<div class="DIV1"></div>
<div class="DIV2"></div>
<div class="DIV3"></div>
</div>
The sizing of the divs can be controlled by setting a width and height, but that's not the main issue. The main issue is: How to position the divs like the diagram above using grid?
Thank you
You do that by setting appropriate grid-template-columns and grid-template-areas:
* { box-sizing: border-box; }
body { margin: 0; }
#parent_div {
border: 5px dotted red;
height: 100vh;
display: grid;
padding: 100px;
gap: 10px;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"div1 div2"
"div1 div3";
}
#parent_div> div {
border: 3px solid green;
}
.DIV1 {
grid-area: div1;
}
.DIV2 {
grid-area: div2;
}
.DIV3 {
grid-area: div3;
}
<div id="parent_div">
<div class="DIV1"></div>
<div class="DIV2"></div>
<div class="DIV3"></div>
</div>
This question already has an answer here:
Why are CSS named grid areas not in quotes?
(1 answer)
Closed 2 years ago.
This may be obvious but I have been stuck on it for a while and have searched stackoverflow to no avail.
Everywhere I have a grid-area value I am getting "invalid property value" in google chrome when looking at the elements.
The content is simply being placed in the 3rd grid item on the left when it should be in the 4th.
.dashboard {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 50px auto;
grid-template-areas:
"left top"
"left content";
height: 100vh;
}
.left-nav {
grid-area: "left";
}
.top-nav {
grid-area: "top";
}
.content {
grid-area: "content";
}
<div class="dashboard">
<div class="left-nav">
LEFT
<app-left-nav></app-left-nav>
</div>
<div class="top-nav">
TOP
<app-top-nav></app-top-nav>
</div>
<div class="content">
CONTENT
<router-outlet></router-outlet>
</div>
</div>
You should have the attribute value without quotes grid-area: top;:
.dashboard {
display: grid;
grid-template-areas:
'left top'
'left content';
height: 100vh;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.dashboard > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.left-nav {
grid-area: left;
}
.top-nav {
grid-area: top;
}
.content {
grid-area: content;
}
<div class="dashboard">
<div class="left-nav">
LEFT
<app-left-nav></app-left-nav>
</div>
<div class="top-nav">
TOP
<app-top-nav></app-top-nav>
</div>
<div class="content">
CONTENT
<router-outlet></router-outlet>
</div>
</div>
I have the following code:
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.a {
background-color: red;
width: 65%;
}
.b {
background-color: green;
width: 35%;
}
.c {
background-color: blue;
width: 65%;
height: 100px;
}
.d {
background-color: orange;
width: 35%;
}
.e {
background-color: teal;
width: 65%;
}
.f {
background-color: purple;
width: 35%;
}
<div class="wrapper container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
I am trying to make the F be right under D, like this:
The main reason I am doing this instead of 2 separate columns is because I want to be able to arrange the columns in mobile later by using order. Is this possible in Flexbox, or is there another way?
In order for a flex column to wrap, you need to define a fixed height on the container. Otherwise, without a breakpoint, the column has no reason to wrap. It will simply expand the container as a single column.
This problem is explained in more detail here:
Is it possible for flex items to align tightly to the items above them?
You're probably better off with a grid solution.
.wrapper {
display: grid;
grid-template-columns: 65% 35%;
grid-template-areas: " a b "
" c d "
" c f "
" c . "
" c . "
" e . " ;}
.a { grid-area: a; background-color: red; }
.b { grid-area: b; background-color: green; }
.c { grid-area: c; background-color: blue; height: 100px; }
.d { grid-area: d; background-color: orange; }
.e { grid-area: e; background-color: teal; }
.f { grid-area: f; background-color: purple; }
<div class="wrapper">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
Browser support is now pretty strong for CSS Grid.
Also, the order property works in both Grid and Flex layouts. But you may not need order in Grid to re-arrange your layout for mobile screens. You can simply use grid properties.
Inspired from Easy-Masonry-Layout-With-Flexbox
Seems to do the job for me
<div id="masonry">
<img src="irina.jpg" alt>
<img src="daniella.jpg" alt>
<img src="karina.jpg" alt>
…
</div>
div#masonry {
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
font-size: 0;
}
div#masonry img {
width: 33.3%;
transition: .8s opacity;
}