I have a grid with nested left and right grids. I want my left grid to take full height of the browser and be fixed in position. I want my right grid to get a vertical scroll bar as I add content to it.
body{ margin: 0 0; padding: 0 0 ; }
.grid {
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 10px;
grid-auto-rows: 500px;
}
.left{
display: grid;
grid-template-rows : repeat(3,1fr);
grid-gap : 5px;
grid-auto-rows: 500px;
}
.one{ background: violet; }
.two{ background: indigo; }
.three { background: blue; }
.right{
display: grid;
grid-template-rows: repeat(4,1fr);
grid-gap : 5px;
}
.four{ background: green; }
.five{ background: yellow; }
.six { background: orange; }
.seven{ background: red}
<body>
<div class="grid">
<div class="left">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="right">
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
</div>
</div>
</body>
How do you plan to get the left grid to occupy full height and remain fixed if you have grid-auto-rows: 500px? This will overflow the container in many cases.
Here's a revised version of your code, with a fixed left-side grid, and grid-auto-rows: 500px with overflow: auto on the right-side grid.
.grid {
display: grid;
grid-template-columns: 1fr 3fr; /* switched from percentages for spacing efficiency */
grid-gap: 10px;
/* grid-auto-rows: 500px; */
height: 100vh; /* new */
}
.left {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-gap: 5px;
/* grid-auto-rows: 500px; */
}
.right {
display: grid;
/* grid-template-rows: repeat(4, 1fr); */
grid-gap: 5px;
grid-auto-rows: 500px; /* new */
overflow: auto; /* new */
}
.one { background: violet; }
.two { background: indigo; }
.three { background: blue; }
.four { background: green; }
.five { background: yellow; }
.six { background: orange; }
.seven { background: red }
body { margin: 0 0; padding: 0 0; }
<div class="grid">
<div class="left">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="right">
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
</div>
</div>
Related
My question is similar to this one: I'm trying to contain an aspect-ratio element within its parent element. One difference though, this aspect-ratio element has siblings—a header and a footer—and all this nice family should be center-aligned and share a common width.
Images are worth a thousand words:
GIFs are worth a thousand images:
I'm close to that result, but I'm not quite there yet:
body {
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
height: 50px;
}
#paper {
aspect-ratio: 1;
background-color: red;
margin: auto;
max-height: 100%;
overflow: hidden;
width: 100%;
}
#wrapper {
align-content: center;
display: grid;
height: 100%;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Any CSS wizard to help me out?
Not sure if you can get all the requirements but here is the best I could do (seems to work on chrome only)
body {
background-color: lightgrey;
margin: 0;
}
#footer,
#header {
background-color: blue;
height: 50px;
}
#paper {
aspect-ratio: 1;
background-color: red;
max-height: 100%;
max-width: 100vw;
}
#wrapper {
place-content: center;
display: grid;
height: 100vmin;
margin-block: max(0px,50vh - 50vmin);
grid-template-rows: auto minmax(0, 1fr) auto;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
If the 50px is known you can do like below:
body {
background-color: lightgrey;
margin: 0;
--h: 50px; /* the fixed height */
}
#footer,
#header {
background-color: blue;
height: var(--h);
}
#paper {
aspect-ratio: 1;
background-color: red;
width: min(100vw,100vh - 2*var(--h));
}
#wrapper {
place-content: center;
display: grid;
height: min(100vh, 100vw + 2*var(--h));
margin-block: max(0px, (100vh - 100vw - 2*var(--h))/2);
grid-template-rows: auto minmax(0, 1fr) auto;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Try this solution, all the magic happens in grid-template-columns and grid-template-rows.
html {
background-color: lightgrey;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
--footer-header-height: 50px;
align-content: center;
display: grid;
height: 100vh;
grid-template-columns: 1fr minmax(auto, calc(100vh - var(--footer-header-height) * 2)) 1fr;
grid-template-rows: auto minmax(auto, 100vw) auto;
}
#footer,
#header {
grid-column: 2;
background-color: blue;
height: var(--footer-header-height);
}
#paper {
grid-column: 2;
aspect-ratio: 1 / 1;
background-color: red;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Actually Container Queries enable us to solve this kind of problems elegantly.
Support for this feature is currently very bad (see here), but it's part of Interop 2022 so I guess it'll look different by the end of the year.
I post this as an answer as it might help someone in the future 👽👋
Note that you currently need to turn on a flag on Chrome to be able to test it.
body {
container-type: size;
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
}
#paper {
background-color: red;
}
#wrapper {
align-content: center;
display: grid;
grid-template-columns: min(100cqi, (100cqb - 100px));
grid-template-rows: 50px min(100cqb - 100px, 100cqi) 50px;
justify-content: center;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Here's the same code but relying on viewport units (works in all browsers):
body {
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
}
#paper {
background-color: red;
}
#wrapper {
align-content: center;
display: grid;
grid-template-columns: min(100vw, (100vh - 100px));
grid-template-rows: 50px min(100vh - 100px, 100vw) 50px;
height: 100%;
justify-content: center;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
I created a text and made a boundary around it. Later, I specified the dimensions of the box according to my needs. When I increased the size of the text, it extended outside the box. I even wrote 'text-align:center;' in it's CSS part. Still it is not giving any result.
I've tried text-align:center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: white;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
height: 130px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1>
<f style="font-family:'Abril Fatface'">BITS</f>
<g style="font-family:'Antic Didone'">Hack</g>
</h1>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>
I expect the name BITSHack to be inside the boundry, but it is extending it.
Don't use height: 130px; inside name class.Try this code:
.name{
height: auto;
}
Don't use height at all, the default is set to auto. Also don't use f and g tags, use span. Yuo can wrap both spans with a div and then align the div to the center if you'll the give the container (.name in your case)
display: flex;
align-items: center;
justify-content: center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: green;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<div>
<span style="font-family:'Abril Fatface'">BITS</span>
<span style="font-family:'Antic Didone'">Hack</span>
</div>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>
.cards
{
display:grid;
grid-template-row: 1fr 2fr 1fr;
margin-right:50px;
margin-left:50px;
grid-row-gap:20px;
}
.main
{
grid-row:2/3;
display:grid;
grid-template-row:1fr 1fr;
grid-row-gap:50px;
margin-top:80px;
}
.upper
{
grid-row:1/2;
display:grid;
grid-template-columns:1fr 2fr 1fr;
height:150px;
//height: auto;
grid-column-gap:10px;
}
.name
{
color:black;
border: solid 10px #00CED1;
border-radius:15px;
font-size:30px;
height:auto;
padding:5px;
margin-left:50px;
grid-column:1/3;
text-align:center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1><f style="font-family:'Abril
Fatface'">BITS</f><g style="font-
family:'Antic Didone'">Hack</g></h1>
</div>
<div class="year">
<h1 style="font-family:'Asap
Condensed'">2019</h1>
</div>
</div>
now try to execute it,your expected result will come.
I have this simple grid div:
#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
background-color: red;
}
#item5 {
background-color: aqua;
}
<div id="grid">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
</div>
Why are my items skipping the first column and are placed into the second one?
You have " " characters () before each of your inner <div> elements, which get interpreted as additional new lines, and interfere with your grid layout. Replacing these with regular spaces fixes the problem:
#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
background-color: red;
}
#item5 {
background-color: aqua;
}
<div id="grid">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
</div>
I'm experimenting with css grid and i'm trying to make a simple example, but it does not seem to work on IE11 although i use the appropriate syntax:
.grid {
background: gold;
height: 90vh;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
section {
background: red;
}
<div class="grid">
<section>
section1
</section>
<section>
section2
</section>
</div>
Apparently you need to explicitly set the location of each element of the grid, so for the example in the question, you'll need to do this:
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
section2
</section>
</div>
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
}
Doing it manually can be very tedious, but if you use grid-template-areas, autoprefixer will automatically render it for you.
So the final example looks like this:
.grid {
grid-template-areas: "s1 s2";
background: gold;
height: 500px;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
.grid .grid{
height: 300px;
}
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: s1;
}
.s1 .s1 {
background: teal;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: s2;
}
.s2 .s2 {
background: yellow;
}
section section {
background: green;
}
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
<div class="grid">
<section class="s1">
nested-section1
</section>
<section class="s2">
nested-section2
</section>
</div>
</section>
</div>
I want to align some div's with same class name in a row using css grid layout. when i tried all div are aligned in top of another one. How to achieve this using css grid layout.
.front{
grid-area: front;
}
.accountcontainer{
display: grid;
margin: 0 10px;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"front front front front";
margin-bottom: 20px;
}
Don't use grid-area
Just specify the grid-row for that class.
Note the number of divs with that class MUST be the same as (or less than) the number of columns.
.container {
display: grid;
margin: 10px auto;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: rows;
margin-bottom: 20px;
border: 1px solid grey;
}
.item {
height: 60px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
color: whitesmoke;
border: 1px solid red;
}
.item.front {
background: rebeccapurple;
}
.front {
grid-row: 1;
}
<div class="container">
<div class="item front">1</div>
<div class="item front">2</div>
<div class="item"></div>
<div class="item front">3</div>
<div class="item front">4</div>
<div class="item"></div>
<div class="item"></div>
</div>