i am stuck with css problem.
I have elementor blog template i need to make on 1 / 2 / 1 columns.
See attach on photo. I made with :nth-child(3) & :nth-child(4) to be 50%, but i can not make them on same line.
I find other way to make it with: display: flex; flex-wrap: wrap; but they are space on right side i cannot remove.
Please help for resolve this problem :)
is this what you want?
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 10px;
}
.grid__item {
background-color: lightblue;
padding: 10vh 0;
text-align: center;
}
.grid__item:nth-child(1) {
grid-row: 1/2;
grid-column: 2/4;
}
.grid__item:nth-child(2) {
grid-column: 2/3;
}
.grid__item:nth-child(4) {
grid-column: 2/4;
}
<section class="grid">
<div class="grid__item">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
</section>
Related
I want to place box 2 on top of both other boxes by half of them, however, even having explicitly defined grid-template-columns propriety to 1fr it automatically creates another column.
Here is my attempt
index.html
<div class="grid-overlap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
style.scss
.grid-overlap {
max-width: 40rem;
width: 95%;`your text`
margin: 2rem auto;
gap: 1rem;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 1fr;
.box {
width: 300px;
height: 300px;
margin: 0 auto;
text-align: center;
font-size: 3rem;
}
.box:nth-child(1) {
grid-row: 1 / 3;
background-color: dodgerblue;
}
.box:nth-child(2) {
background-color: red;
grid-row: 2 / 4;
z-index: 100;
}
.box:nth-child(3) {
grid-row: 3 / 5;
background-color: tomato;
}
}
Thanks in advance.
I am giving one example of overlap, try to see how it works and use it in your use case.
.grid-overlap {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.grid-overlap .box:nth-child(1) {
grid-row: 1/3;
grid-column: 1/3;
background-color: dodgerblue;
}
.grid-overlap .box:nth-child(2) {
background-color: rgba(255, 0, 0, 0.6);
grid-row: 2/4;
grid-column: 2/4;
}
<div class="grid-overlap">
<div class="box">1</div>
<div class="box">2</div>
</div>
Looking at the grid we can see that the second square starts in the middle of the first one and that the last one is positioned at one quarter along and three quarters down the first square.
This leads to a grid of width 6 and height 7 square cells.
As it's not possible to have both the grid imensions set at 300px and the width of the grid to be defined in rems (and % units) this snippet drops the 300px settings and sets the overall grid to be the width as defined in the question and the aspect ratio 6/7.
Note that the grid gap is not set (defaults to 0) as no gap was shown in the picture given in the question.
body {
width: 100vw;
height: 100vh;
}
.grid-overlap {
max-width: 40rem;
width: 95%;
aspect-ratio: 6 / 7;
margin: 2rem auto;
gap: 1rem;
gap: 0;
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-template-columns: repeat(6, 1fr);
}
.box {
/*width: 300px;
height: 300px;*/
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
font-size: 3rem;
}
.box:nth-child(1) {
grid-column: 1 / span 4;
grid-row: 1 / span 4;
background-color: dodgerblue;
}
.box:nth-child(2) {
background-color: red;
grid-column: 3 / span 4;
grid-row: 3 / span 4;
z-index: 100;
}
.box:nth-child(3) {
grid-column: 2/ span 4;
grid-row: 4 / span 4;
background-color: tomato;
}
<body>
<div class="grid-overlap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
If the important dimensions were the 300px then use those to set the width of the overall grid.
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
Is it possible to create a layout the same as the below one in flexbox?
You can also make this layout with 3containers if you want it as flexbox.
.container {
display:flex;
width: 400px;
height: 200px
}
.container1 article, .container3 article {
width: 100px;
height: 200px;
background-color: orange
}
.container2 article {
width: 200px;
height: 100px;
background-color: red;
border: 1px solid blue
}
.container2 {
display: flex;
flex-direction: column;
}
article {
display: flex;
justify-content: center;
align-items: center
}
<section class="container">
<section class="container1">
<article>1</article>
</section>
<section class="container2">
<article>2</article>
<article>3</article>
</section>
<section class="container3">
<article>4</article>
</section>
</section>
It's not possible yet, to set all of them only in a container, you must have 3 containers.
Or you can also use CSS Grid. It's more preferred for these use cases.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
width: 400px;
height: 200px
}
article {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
background-color: orange
}
.first {
grid-column: 1/ 2;
grid-row: 1/ 3
}
.second {
grid-column: 2/ 4;
}
.third {
grid-column: 2/ 4;
grid-row: 2/ 3
}
.forth {
grid-column: 4/ 5;
grid-row: 1/ 3
}
<section class="container">
<article class="first">1</article>
<article class="second">2</article>
<article class="third">3</article>
<article class="forth">4</article>
</section>
Both divs display correctly alone, but if both img-1 and img-2 divs are both in the container, the second div disappears.
HTML:
<div class="body-background">
<div class="background-img-1"></div>
<div class="background-img-2"></div>
</div>
CSS
.body-background {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
width: 100%;
height: 100%;
}
.background-img-1 {
background: red;
grid-column: 1 / 3;
}
.background-img-2 {
background: blue;
grid-column: 2 / 4;
}
Shouldn't the boxes overlap normally?
Give both background divs a grid-row: 1 property (which becomes grid-row: 1 / 2). I don't think the browser likes having to give it implicitly to two overlapping cells.
.body-background {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
width: 100vw;
height: 100vh;
}
.background-img-1 {
background-color: red;
grid-column: 1 / 3;
grid-row: 1;
}
.background-img-2 {
background-color: blue;
grid-column: 2 / 4;
grid-row: 1;
}
<div class="body-background">
<div class="background-img-1"></div>
<div class="background-img-2"></div>
</div>
I have a basic 2-column layout: One for an image, one for text. Since the text column can potentially become quite long I'd like the image to scroll along. I can achieve that easily enough with position: sticky;, but at the end there is a third container spanning both columns. Since all three elements are in the same grid, the image with position: sticky; overlaps the third container.
Is there way to confine the image to the first grid row, without using JS or adding additional containers?
Example: https://jsfiddle.net/y27unz9L/
.element-1 is the one I want to confine to the first grid row.
<div class="grid-container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2em;
align-items: start;
}
.element-1 {
min-height: 10vh;
grid-row: 1;
grid-column: 1 / 2;
position: sticky;
top: 1em;
background: red;
}
.element-2 {
min-height: 100vh;
grid-row: 1;
grid-column: 2 / 3;
background: blue;
}
.element-3 {
min-height: 100vh;
grid-row: 2;
grid-column: 1 / 3;
background: yellow;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2em;
align-items: start;
}
.element-1 {
min-height: 10vh;
grid-row: 1;
grid-column: 1 / 2;
position: sticky;
top: 1em;
background: red;
}
.element-2 {
min-height: 100vh;
grid-row: 1;
grid-column: 2 / 3;
background: blue;
}
.element-3 {
min-height: 100vh;
grid-row: 2;
grid-column: 1 / 3;
background: yellow;
position: sticky;
}
<div class="grid-container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
</div>
Hmmm I would have element-1 to be the cell and stick something inside it. Like this https://jsfiddle.net/7pcr8fvz/.
<div class="element-1">
<div class='sticky'>
</div>
</div>
.element-1 {
grid-row: 1;
grid-column: 1 / 2;
align-self: stretch; //so it's 100% of the available height
}
.element-1 .sticky {
position: sticky; //make this element sticky
top: 1em;
background: red;
height: 10vh;
}
The problem with making .element-1 sticky is that it's relative to the grid, if you make a child sticky the child is positioned relative to .element-1.
I have an article and an aside (sidebar) element - easy, except the title and sub-heading of the article need to span the entire row. If I take the title/sub-heading out of the article, the article element is no longer semantically complete.
Is there a way, using CSS Grid, to have the format below, where Title, Sub and Content are all a part of an "Article" element, and "Aside" is the second in a 2 column grid?
From my research so far, it seems this is not possible.
You can hack your way through using nested CSS grid if you know:
The width of the aside section
The height of the title and sub heading sections
(in many layouts, these dimensions are fixed)
You can use a pseudo element that create a space for the aside element and then sneak it inside the outer grid container - check out the demo below:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
article,
aside {
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
}
div {
display: grid;
grid-template-areas: "section aside";
}
section {
grid-area: section;
display: grid;
grid-template-areas: "header header" "subhead subhead" "content empty";
grid-template-rows: 50px 50px auto;
grid-template-columns: 80vw auto;
height: 100vh;
width: 100vw;
}
section article:first-child {
grid-area: header;
}
section article:nth-child(2) {
grid-area: subhead;
}
section article:last-child {
grid-area: content;
}
section:after {
content: '';
display: block;
grid-area: empty;
}
aside {
grid-area: aside;
height: calc(100vh - 100px);
width: 20vw;
align-self: flex-end;
position:relative;
transform: translateX(-100%);
}
<div>
<section>
<article>Article title</article>
<article>Article sub-heading</article>
<article>Article content</article>
</section>
<aside>Aside</aside>
</div>
You can use something like this.
* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 10px;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 4;
grid-row: 1;
}
.two {
grid-column: 1 / 4;
grid-row: 2;
}
.three {
grid-column: 1 / 3;
grid-row: 3;
min-height:200px;
}
.four {
grid-column: 3;
grid-row: 3;
min-height:200px;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
Also check Fiddle.
And for more details please visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
You can achieve that by simply floating all the cells, as long as the article doesn't float - https://jsfiddle.net/yxbckzcq/1/
<div class="wrapper">
<article>
<div style="float:left;width:100%" class="one">One</div>
<div style="float:left;width:100%" class="two">Two</div>
<div style="float:left;width:70%" class="three">Three</div>
</article>
<div style="float:left;width:30%" class="four">Four</div>
</div>