Red and Blue sections are next to each other but the yellow section is not on the same line and under the blue section, they are also both the same height as the red section, I can not work out where I have gone wrong
.contact-information {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(90px, auto);
width: 100%;
overflow: hidden;
}
.contact-left-section {
grid-column: 1/3;
grid-row: 1/2;
background-color: red;
}
.contact-middle-section {
grid-column: 3/6;
grid-row: 1/2;
background-color: blue;
}
.contact-right-section {
grid-column: 6/9;
grid-row: 1/2;
background-color: yellow;
}
<section class="about light contact-information">
<div class="contact-left-section">
<div class="section-title">Phone</div>
<div class="section-content">
<p>Lorem ipsum</p>
</div>
</div>
<div class="contact-middle-section">
<div class="section-title">Services</div>
<div class="section-content">
<p>Lorem ipsum</p>
</div>
<div class="contact-right-section">
<div class="section-title">Email</div>
<div class="section-content">
<p>Lorem ipsum</p>
</div>
</div>
</section>
Firstly, you had only defined eight columns instead of nine but more importantly, you had not closed the .contact-middle-section div leaving the layout broken.
.contact-information {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(90px, auto);
width: 100%;
overflow: hidden;
}
.contact-left-section {
grid-column: 1/3;
grid-row: 1/2;
background-color: red;
}
.contact-middle-section {
grid-column: 3/6;
grid-row: 1/2;
background-color: blue;
}
.contact-right-section {
grid-column: 6/9;
grid-row: 1/2;
background-color: yellow;
}
<section class="about light contact-information">
<div class="contact-left-section">
<div class="section-title">Phone</div>
<div class="section-content">
<p>Lorem ipsum</p>
</div>
</div>
<div class="contact-middle-section">
<div class="section-title">Services</div>
<div class="section-content">
<p>Lorem ipsum</p>
</div>
</div>
<div class="contact-right-section">
<div class="section-title">Email</div>
<div class="section-content">
<p>Lorem ipsum</p>
</div>
</div>
</section>
You can try to replace:
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
for:
grid-template-columns: repeat(9,1fr);
I hope this solution will help...
Related
I have an element which I want to use the 100% of the height available on a grid-layout design.
What I have is this:
.wrapper {
background: #F7F7F7 !important;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
grid-template-areas: "a b c" "d e f";
}
.one {
grid-area: a;
}
.two {
grid-area: b;
}
.three {
grid-area: c;
}
.four {
grid-area: d;
}
.five {
grid-area: e;
}
.six {
grid-area: f;
}
<div class="wrapper">
<div class="one">
<image height="100%">
</div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
How can I do to have the image with a height that uses the 100% of the one height available?
Thanks!
You can give a class to it and make it's width and height 100%
.wrapper {
background:#000 !important;
width:100%;
height:100vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
padding:20px;
grid-template-areas:
"a b c"
"d e f";
}
.scene{
width:100%;
height:100%;
}
.white{
background:#fff;
}
.one{
grid-area:a;
}
.two{
grid-area:b;
}
.three{
grid-area:c;
}
.four{
grid-area:d;
}
.five{
grid-area:e;
}
.six{
grid-area:f;
}
<div class="wrapper">
<div class="one white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="two white"></div>
<div class="three white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="four white"></div>
<div class="five white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="six white" ></div>
</div>
help me please, how do i get a result like this in the grid? the result i want - link - img https://ibb.co/XbW025V . here is my code https://jsfiddle.net/o0zjuyqb/1/
<div class="container">
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</div>
You can do this by using grid-column: span 2;
.grid {
display: grid;
grid-auto-flow: dense;
grid-template-columns: 250px 290px 290px 250px;
grid-template-rows: repeat(2, 280px);
gap: 40px;
}
.grid div {
background: grey;
}
.grid div.wide {
grid-column: span 2;
background: green;
}
<div class="grid">
<div class="wide"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="wide"></div>
</div>
Lets suppose I have parent container with fixed height:
.container {
max-height: 100px;
}
This container contains a grid, which has to be take the whole height, and if cell's content doesn't fit, it has to be scrollable.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
But if content of grid's cells is too big vertically, the grid is blowout the parent container, and I have no idea how to fix it.
minmax doesn't work for me in this case.
Example code:
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1 / span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
You may add max-height: inherit; to the .grid so it can inherit the max height to make the overflow works properly.
Ultimately you want to restrict height of the .grid instead of the container, since it's the children of the .grid needs to be scrollable, not .container.
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
/* added */
max-height: inherit;
}
.grid > * {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1/span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
Simply make the parent a flexbox container
.container {
display:flex;
max-height: 100px;
border: 1px solid red;
}
.grid {
width:100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.left {
grid-column: 1;
grid-row: 1 / span 2;
}
.right-top {
grid-column: 2;
grid-row: 1;
}
.right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
what is the reason that a CSS Grid layout is rendered differently when a top level child item is an input rather than a div? and how could I resolve this so that they are rendered consistently?
CSS:
.container {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: auto;
grid-auto-flow: column;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
margin-bottom: 1rem;
}
.container > * {
border: 2px dashed blue;
}
.item-1 {
grid-row: 1;
grid-column: 1 / span 5;
}
.item-2 {
grid-row: 1;
grid-column: 6;
}
.item-3 {
grid-row: 1;
grid-column: 7 / span 4;
}
.item-4 {
grid-row: 1;
grid-column: 11 / span 1;
}
CSS Grid with divs as children:
<div class="container">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<div class="item-3">Item 3</div>
<div class="item-4">Item 4</div>
</div>
CSS Grid with one child instead as an input:
<div class="container">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<input type="text" class="item-3" value="item 3" />
<div class="item-4">Item 4</div>
</div>
Always define the size explicitely otherwise the auto size will do the job and an input is not the same as a div
.container {
display: grid;
grid-template-rows: 1fr;
grid-auto-columns: 1fr; /* the size of 1 column */
grid-auto-flow: column;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
margin-bottom: 1rem;
}
.container>* {
border: 2px dashed blue;
}
.item-1 {
grid-column: 1 / span 5;
}
.item-2 {
grid-column: 6;
}
.item-3 {
grid-column: 7 / span 4;
}
.item-4 {
grid-column: 11 / span 1;
}
CSS Grid with divs as children:
<div class="container">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<div class="item-3">Item 3</div>
<div class="item-4">Item 4</div>
</div>
CSS Grid with one child instead as an input:
<div class="container">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<input type="text" class="item-3" value="item 3" />
<div class="item-4">Item 4</div>
</div>
I've got the following setup:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
}
.a {
background-color: green;
grid-column: 1/7;
griw-row: 1;
}
.b {
background-color: grey;
grid-column: 7/-1;
grid-row: 1;
}
.c {
background-color: blue;
grid-column: 1/7;
grid-row: 2;
}
.d {
background-color: yellow;
grid-column: 7/-1;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
The element with css class .a is dynamic and not always available. How can I shift right column (.b) to the left when .a column is not available?
Note: I can't use grid-auto-columns as IE11 doesn't support it.
Don't explicitly define the column positions. Simply set the number of column and the auto placement will do the job for you:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
margin: 5px;
}
section > * {
grid-column: span 6; /* all the items should take 6 columns*/
}
.a {
background-color: green;
}
.b {
background-color: grey;
}
.c {
background-color: blue;
grid-row: 2;
}
.d {
background-color: yellow;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
<section>
<div class="a">
Content a
</div>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>