I want to set one rows height in mobile view to maximum of 670px and below that minimum of 100vh, but when I write it like this:
#media only screen and (max-width: $bp-mobile) {
grid-template-rows: minmax(100vh, 67rem) repeat(7, max-content);
}
It always expands me first row to 100vh if viewport height equals 1000px my row has getting height of 1000px. How to combine vh below that specific maximum height 670px to be always 100vh and over 670px to lock this row to 670px of height?
.container {
display: grid;
border: 2px solid red;
grid-template-rows: minmax(100vh, 67rem) 1fr;
}
.test-1 {
background-color: orangered;
}
.test-2 {
background-color: cyan;
height: 30rem;
}
<div class="container">
<div class="test-1">1</div>
<div class="test-2">2</div>
</div>
You can do it with max-height like below:
.container {
display: grid;
border: 2px solid red;
grid-template-rows: auto 1fr;
}
.test-1 {
background-color: orangered;
height:100vh;
max-height:67rem;
}
.test-2 {
background-color: cyan;
height: 30rem;
}
html {
font-size:10px;
}
<div class="container">
<div class="test-1">1</div>
<div class="test-2">2</div>
</div>
Related
I need to create layout 2x2 blocks with min-width 500px and min-height 300px. (first img).
I can collapse blue block (by click on it) to height 100px and the block which is below must fill the gap and become bigger. The same behaviour if lower block collapsed, the upper will stretch. (second img)
if screen width > 1200, turn it into 4 columns with width:300px, height:600px (third img) enter image description here
I tried to do add for parent
width: 100%;
height: 100%;
display: grid;
grid-template-rows: minmax(300px, 1fr) minmax(300px, 1fr);
grid-template-columns: minmax(500px, 1fr) minmax(500px, 1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
}
and also added
#media (min-width: 1200px) {
.parent {
grid-template-rows: minmax(600px, 1fr);
grid-template-columns: repeat(4, minmax(300px, 1fr));
}
}
but I don't know how to implement collapsing
Try this. I use the columns property on the parent to make a 2 column layout with the children to be flex containers. This means that when the flex children are clicked, we can use flex-grow, flex-shrink and flex-basis to make the clicked one smaller and the unclicked one automatically grow.
For screen sizes greater than 1200px, I've used a media query to flip the flex container to flex-direction: row which makes your four columns. The only bit that's annoying is that the column layout, the middle section is wider than the other parts. You might be able to fix this with a bit of tweaking
window.onload = () => {
document.querySelector('.container').addEventListener('click', (e) => {
e.target.classList.toggle('shrink');
});
}
.container {
columns: 2;
padding: 0.5rem;
border: 3px solid black;
height: 600px;
}
.column {
display: flex;
flex-direction: column;
height: 100%;
}
[id^="b"] {
background-color: #00A8F3;
border: 3px solid black;
margin-bottom: 0.5rem;
display: grid;
place-items: center;
padding: 1rem;
flex-grow: 1;
flex-shrink: 1;
}
.shrink {
flex-basis: 100px;
flex-grow: 0;
}
#media screen and (min-width: 1200px) {
.column {
flex: 1;
flex-direction: row;
justify-content: space-evenly;
}
.container {
display: flex;
}
[id^="b"] {
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}
}
<div class='container'>
<div class='column'>
<div id='b1'>1</div>
<div id='b2'>2</div>
</div>
<div class='column'>
<div id='b3'>3</div>
<div id='b4'>4</div>
</div>
</div>
You can try like below. I added a checkbox to simulate the switch between (1) and (2)
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns */
grid-auto-flow: dense;
gap: 20px;
border:1px solid;
height: 300px;
}
.container > div {
display: flex;
flex-direction: column;
gap: 20px;
}
.container > div > div {
flex-grow: 1; /* fill remaining height */
height: 100%; /* we start with equal div */
background: lightblue;
font-size: 20px;
}
#media (max-width: 1200px) {
/* update the height on toggle */
input:checked ~ .container > div:first-child > div:last-child,
input:checked ~ .container > div:last-child > div:first-child {
height: 80px;
}
}
#media (min-width: 1200px) {
.container {
grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columns */
}
.container > div {
display: contents; /* remove inner divs */
}
/* rectify the order */
.container > div:first-child > div:last-child {
grid-column: 3;
}
}
<input type="checkbox">
<div class="container">
<div>
<div> 1 </div>
<div> 3 </div>
</div>
<div>
<div> 2 </div>
<div> 4 </div>
</div>
</div>
I works well on big screen for some reason as soon as you starting
shrinking the screen it creat space when you onpen it on the big
screen it works well
enter code * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
background: linear-gradient(to right, #fcf6f6 52%, white 48%);
}
.factory1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 10px;
gap: 10px;
}
.factory1 > div {
background-color: gray;
border: 1px beige solid;
}
.box-one,
.box-three {
height: 450px;
}
.box-three {
grid-column: 1/3;
}
.box1 {
height: 450px;
}
.factory2 > div {
background-color: gray;
border: 1px beige solid;
}
.factory2 {
display: grid;
grid-template-rows: 1fr 1fr;
padding: 10px;
gap: 15px;
}
.house {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media only screen and (max-width: 768px) {
.factory2 > div {
background-color: rgb(93, 206, 18);
border: 1px beige solid;
}
.house {
display: flex;
flex-direction: column;
}
}
.image-2 {
width: 100%;
height: auto;
}here
<div class="house">
<div class="factory1">
<div class="box-one">
<img src="images/1-4.jpg" alt="" class="image-2" />
</div>
<div class="box-two">
<img src="images/1-4.jpg" alt="" class="image-2" />
</div>
<div class="box-three">box-three</div>
</div>
<div class="factory2">
<div class="box1">
<img src="images/simg.jpg" class="image-2"></img>
</div>
<div class="box2">box2</div>
</div>
</div>
I don't know what I'm doing wrong
Blockquote
I works well on big screen for some reason as soon as you starting
shrinking the screen it creat space
I works well on big screen for some reason as soon as you starting
shrinking the screen it creat space when you onpen it on the big
screen it works well
I want to set for fist element '1fr' and any other elements should have fixed size
I'm tried this and it works.
grid-template-columns: 500px repeat(auto-fill, 50px);
This, what I'm trying to do.
.container {
display: grid;
grid-template-columns: 1fr repeat(auto-fill, 50px);
> div {
border: 1px solid red;
}
}
A first element should have a 1fr (any available space)
enter image description here
I think flexbox would be more appropriate here.
.container {
display: flex;
height: 98vh;
margin: 1vh 1vw;
}
.item {
border: 1px solid red;
flex: 0 0 50px;
margin: .5em;
}
.wide {
flex: 1
}
<div class="container">
<div class="item wide">Auto Remaining Width</div>
<div class="item">50px</div>
<div class="item">50px</div>
<div class="item">50px</div>
</div>
Is it possible to limit the width of a CSS grid column?
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: minmax(17.5%, 250px) minmax(31.25%, 480px) auto;
grid-template-rows: 100vh;
grid-gap: 0;
}
.menu {
padding-top: 32px;
background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
background-color: #F5F5FC;
}
<div class="container">
<div class="menu"></div>
<div class="list-view"></div>
<div class="details"></div>
</div>
In the example above it always uses 17.5% width for the menu because:
"If max is smaller than min, then max is ignored and the function is
treated as min."
source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
What I want is a menu that is 17.5% width with a max of 250px. Is that possible?
One way to do this might be declare:
.container {grid-template-columns: 250px 480px auto;}
as your standard rule.
Then, after considering the narrowest width you would like to apply to your third column, you can apply a #media query.
Let's say you want to ensure your third column is no narrower than 100px.
250px + 480px + 100px = 830px
So you need to write a #media query for 830px:
#media only screen and (max-width: 830px) {
.container {grid-template-columns: 17.5% 31.25% auto;}
}
Working Example:
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 250px 480px auto;
grid-template-rows: 100vh;
grid-gap: 0;
}
.menu {
padding-top: 32px;
background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
background-color: #F5F5FC;
}
#media only screen and (max-width: 830px) {
.container {grid-template-columns: 17.5% 31.25% auto;}
}
<div class="container">
<div class="menu"></div>
<div class="list-view"></div>
<div class="details"></div>
</div>
You want your column to have a standard width of 17.5%, and a maximum width of 250px.
You can't use grid-template-columns because the minmax() function computes to min anytime max is less than min. This means that 17.5% will override 250px on wider screens.
A clean workaround would be to set grid-template-columns to min-content, which shrink-wraps the column to the length of the content. Then set the width parameters on the grid item.
.container {
display: grid;
grid-template-columns: min-content minmax(31.25%, 480px) auto;
}
.menu {
width: 17.5%;
max-width: 250px;
}
However, the percentage length on the grid item doesn't work in this scenario because the parent reference (the column) is essentially set to a zero width (min-content). (fiddle demo).
Fortunately, in this case, because your container is set to the width of the viewport, you can easily overcome this problem with vw units instead.
.menu {
width: 17.5vw;
max-width: 250px;
}
.container {
display: grid;
grid-template-columns: min-content minmax(31.25%, 480px) auto;
grid-template-rows: 100vh;
grid-gap: 0;
}
.menu {
width: 17.5vw;
max-width: 250px;
padding-top: 32px;
background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
background-color: #F5F5FC;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="menu"></div>
<div class="list-view"></div>
<div class="details"></div>
</div>
jsFiddle demo
Am not sure if its feasible in this way, but an alternative is to use flexbox instead of CSS grid and you can easily achieve this:
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.menu {
width: 17.5%;
max-width: 250px;
padding-top: 32px;
background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
width: 32.25%;
max-width: 480px;
background-color: #F5F5FC;
}
.details {
flex: 1;
}
<div class="container">
<div class="menu"></div>
<div class="list-view"></div>
<div class="details"></div>
</div>
I have a CSS grid that occupies 100% width and 100% height of a window (the body element has display: grid;). The grid has row and column templates and elements which occupy 100% of their allocated space. However, when I add a grid-gap to the grid, it makes the grid too large for the window, forcing scrollbars to appear. How can I stop the grid-gap from adding to the dimensions of the grid - similar to how box-sizing: border-box; stops padding from adding to the dimensions of an element? Instead, I want the gaps to shrink the cells of the grid.
Thanks.
When you use "fr" it works.
Example:
HTML:
<section>
<article class="a">A</article>
<article class="b">B</article>
<article class="c">C</article>
<article class="d">D</article>
</section>
SCSS:
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-gap: 20px;
border: 10px solid blue;
article {
background-color: tomato;
&.d {
grid-column: 2;
grid-row-start: 1;
grid-row-end: 4;
background-color: olive;
}
}
}
It works same as if you used box-sizing: border-box and padding as you can see in this demo. Height is set to 100vh and you can see that if you remove or add grid-gap there is no scrollbar, you just need to remove margin from body.
body {
margin: 0;
}
.grid {
display: grid;
height: 100vh;
grid-gap: 20px;
background: #FF7D7D;
grid-template-columns: 1fr 2fr; /* Use Fractions, don't use % or vw */
}
.grid > div {
background: black;
color: white;
}
div.a, div.d {
color: black;
background: white;
}
<div class="grid">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
You could use view-port units:
vw (1% of window's width)
vh (1% of window's height)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.first { height: 40vh; }
.hori { height: 10vh; }
.second { height: 50vh; }
div > div {
float: left;
}
.left { width: 40vw; }
.vert { width: 10vw }
.right { width: 50vw; }
.first .left,
.second .right {
background: #ccc;
}
.first .right,
.second .left {
background: #000;
}
<div class="first">
<div class="left"></div>
<div class="grid-break vert"></div>
<div class="right"></div>
</div>
<div class="grid-break hori"></div>
<div class="second">
<div class="left"></div>
<div class="grid-break vert"></div>
<div class="right"></div>
</div>