.wrapper{
display: grid;
grid-template-columns: minmax(200px, 7fr) 4.4fr;
grid-column-gap: 64px;
}
.block{
background: red;
height: 100px;
}
<div class="wrapper">
<div class='block block-1'></div>
<div class='block block-2'></div>
</div>
I have a simple css grid here with two columns but it doesn't work in IE 11
Can I get this working in IE ?
Here's a flex example. Every odd block will be 55% wide, and even ones will be 35% wide.
.wrapper {
display: flex;
justify-content: space-between;
}
.block {
background-color: red;
height: 100px;
}
.block:nth-child(odd) {
width: 55%;
}
.block:nth-child(even) {
width: 35%;
}
<div class="wrapper">
<div class='block'></div>
<div class='block'></div>
</div>
Related
I have a two column layout. Left has an image. Right has 2 images on top of each other. My goal is to have the images increase as much as possible but have to keep their aspect ratio. And of cause can't overflow outside the containing height.
Right now if you change the width of the browser window, the image resize respecively in a correct way. But if you decrease the height of the window, the images does not decrease in size.
Any tips.
outer-container has height calc(100vh -100px). it is suppose to simulate having a sticky footer.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
}
.right-image {
width: 100%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
Just add max-height properties to the .left-image and .right-image rules so they do not overflow their parent containers.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
max-height: 100%;
}
.right-image {
width: 100%;
max-height: 50%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
This might work as a starting point. Not 100% sure how you want the first column in relation to the second.
I added a footer since you seemed to indicate that?
.outer-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 100px;
background-color: green;
height: 100vh;
}
.left-column {
/* keeps the left image in the box */
min-height: 0;
grid-row: 1 / 2;
grid-column: 1 / 1;
border: solid cyan 2px;
display: flex;
justify-content: center;
}
.right-column {
border: solid yellow 2px;
display: flex;
align-items: start;
justify-content: top;
flex-direction: column;
}
.left-image {
height: 100%;
}
.right-image {
width: 100%;
}
.footer {
/* put accross all columns of last row and super center content */
grid-column: 1 / 3;
grid-row: 3 / 3;
background-color: #ffdd88;
display: grid;
align-items: center;
justify-content: center;
}
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</div>
<div class="footer"> I am the footer thing</div>
</div>
I'm trying to use the grid layout for two columns in one row which can be easily achieved by flex. I have to create one more div for flex but the grid doesn't need one more div.
The problem with the grid is that it will divide the width space by 2 (cannot align to start/left) and that's not what I want, please refer to the first example below and you will understand.
Is there any way to use the grid in this situation but we can align the items to the left like in the second example?
#main-1 {
display: grid;
gap: 30px;
grid-teplate-column: repeat(2, minmax(0, 1fr));
}
.test-1 {
background-color: orange;
grid-area: span 1 / span 2;
}
.test-2 {
background-color: gray;
width: 150px;
}
#main-2 {
display: flex;
gap: 30px;
margin-top: 30px;
}
.test-3 {
background-color: orange;
width: 100%;
}
.test-4 {
background-color: gray;
width: 150px;
}
.test-1,
.test-2,
.test-3,
.test-4 {
height: 60px;
}
<h1>Grid</h1>
<div id="main-1">
<div class="test-1"></div>
<div class="test-2"></div>
<div class="test-2"></div>
</div>
<h1 style="margin:30px 0 0 0;padding-top:15px;border-top: 3px solid #000;">Flex</h1>
<p style="margin:0 0 30px 0;">This is the desired layout but with one more extra div</p>
<div>
<div class="test-3"></div>
<div id="main-2">
<div class="test-4"></div>
<div class="test-4"></div>
</div>
</div>
Edited
Inline-block might work but we cannot control how many items should be on each row. Imagine the width of the first div .first is dynamic and we do not know how wide it would be(but I will make it 30px for illustration). Now the desired layout should be only one .first and one .second on each row.
By inline-block it would appear that now each row is one .first, one .second, and one .first. Check out the example below. Because we cannot control the amount like grid on each row.
#main {
width: 120px;
}
.first,
.second {
display: inline-block;
height: 60px;
}
.first {
background-color: orange;
width: 30px;
}
<div id="main">
<div class="first"></div>
<p class="second">hhhhhh</p>
<div class="first"></div>
<p class="second">hhhhhh</p>
<div class="first"></div>
<p class="second">hhhhhh</p>
</div>
Define the columns as auto and keep only one at 1fr then you can align to the left.
#main-1 {
display: grid;
gap: 30px;
/* update "5" based on your needs */
grid-template-columns: repeat(5,auto) 1fr;
justify-content: left; /* align to left */
}
.test-1 {
background-color: orange;
grid-column: 1/-1; /* take all the columns */
}
.test-2 {
background-color: gray;
width: 150px;
}
#main-2 {
display: flex;
gap: 30px;
margin-top: 30px;
}
.test-3 {
background-color: orange;
width: 100%;
}
.test-4 {
background-color: gray;
width: 150px;
}
.test-1,
.test-2,
.test-3,
.test-4 {
height: 60px;
}
<h1>Grid</h1>
<div id="main-1">
<div class="test-1"></div>
<div class="test-2"></div>
<div class="test-2"></div>
</div>
<h1 style="margin:30px 0 0 0;padding-top:15px;border-top: 3px solid #000;">Flex</h1>
<p style="margin:0 0 30px 0;">This is the desired layout but with one more extra div</p>
<div>
<div class="test-3"></div>
<div id="main-2">
<div class="test-4"></div>
<div class="test-4"></div>
</div>
</div>
I'm trying to use CSS grid to layout some content in the following constraints.
I have three divs - all should be 50% wide but div two and three should stack on top of each other next to div 1.
I've managed to achieve this using grid-template-areas, but I'm using PHP to dynamically populate this, so there's no guarantee that there will always be three divs, so if it goes over this amount, I simply want the grid to repeat.
I'm using the following code right now:
.container {
display: grid;
grid-template-columns: 50% 50% 50%;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"Grid-1 Grid-2 ."
"Grid-1 Grid-3 ."
". . .";
}
.Grid-2 { grid-area: Grid-2; }
.Grid-3 { grid-area: Grid-3; }
.Grid-1 { grid-area: Grid-1; }
html, body , .container {
height: 100%;
margin: 0;
}
.container * {
border: 1px solid red;
position: relative;
}
.container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="Grid-1"></div>
<div class="Grid-2"></div>
<div class="Grid-3"></div>
</div>
It would also ne nice to not have to give each div that I'm generating a PHP the specific area class. Is this achievable using grid?
Simply like below:
.container {
display: grid;
grid-template-columns: 50% 50%; /* 2 columns */
grid-auto-rows:50vh; /* size of one row*/
}
/* for each 3 divs make the first one span 2 rows */
.container > :nth-child(3n + 1) { grid-row:span 2 }
.container * {
border: 1px solid red;
display: grid;
place-items: center;
}
.container *:after {
content:"some content";
}
body {
margin: 0;
}
<div class="container">
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
I was trying to make a design in which there are 2 grid items i.e. left and right. I was trying to make the design fluid so that left can take a minimum of its width or 50%
something like min of(width, 50%)
I've tried minmax but it is just the opposite as I want. Now I'm out of options
Remember: first column would be of dynamic width. Just for testing, I've taken it 200px. It should be responsive as well.
In the below snippet I would like the second column to fill the white space between first and
second
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
background-color: cadetblue;
}
.container {
display: grid;
height: 100%;
grid-template-columns: minmax(auto, 1fr) 1fr;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
im not sure, if i got your point but you could do this:
grid-template-columns: minmax(auto, auto) 1fr;
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
background-color: cadetblue;
}
.container {
display: grid;
height: 100%;
grid-template-columns: minmax(auto, auto) 1fr;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
Flex might be what you are looking for :
Use flex which is the latest trend in CSS
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
width: 100%;
background-color: cadetblue;
}
.container {
display: flex;
height: 100%;
width: 100%;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 2 years ago.
I have made a demo to demonstrate my problem
<style>
.main {
display: grid;
grid-template-rows: 1fr auto;
background-color: red;
width: 300px;
height: 120px;
}
.top {
height: 50px;
background-color: blue;
}
.bottom {
display: grid;
grid-template-columns: minmax(100px, 30%) auto;
column-gap: 10px;
margin: 10px;
}
.left {
background-color: green;
max-height: 100%;
overflow-y: scroll;
}
.right {
background-color: yellow;
}
</style>
<div class="main">
<div class="top">My content</div>
<div class="bottom">
<div class="left">Left hkjs ajsgf dh a sk si sk dils k lkao one sp shek siej</div>
<div class="right">Right</div>
</div>
</div>
The green div exceeds the height of its parent div. I want the green div to be within the red div and have a scroll bar whenever the content exceeds the height of the parent.
I don't know how clear I have explained my problem but please help me.
Add min-height:0 to the parent element.
<style>
.main {
display: grid;
grid-template-rows: 1fr auto;
background-color: red;
width: 300px;
height: 120px;
}
.top {
height: 50px;
background-color: blue;
}
.bottom {
display: grid;
grid-template-columns: minmax(100px, 30%) auto;
column-gap: 10px;
margin: 10px;
min-height:0;
}
.left {
background-color: green;
max-height: 100%;
overflow-y: scroll;
}
.right {
background-color: yellow;
}
</style>
<div class="main">
<div class="top">My content</div>
<div class="bottom">
<div class="left">Left hkjs ajsgf dh a sk si sk dils k lkao one sp shek siej</div>
<div class="right">Right</div>
</div>
</div>