So i was testing the display: grid; input to learn it (it was my first time hearing about it), i tried it and for the most part it worked just fine (the column and row input). the problem comes with the items inputs (that are emojis because the person in the video also used emojis), the emojis were tilted to the side instead of standing straight while in the video they were perfectly normal.
Also, how do i make the items css affect the emojis and not the background only?
body {
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
}
.grid {
display: grid;
grid-template-columns: 1fr 500px 1fr;
grid-template-rows: 100px 200px;
place-items: center;
}
i {
background-color: blue;
width: 50px;
height: 50px;
}
<div>
<div class="grid">
<i>🤩</i>
<i>🤩</i>
<i>🤩</i>
<i>🤩</i>
<i>🤩</i>
<i>🤩</i>
</div>
</div>
Related
<div class="container">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
.wrapper {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-items: space-around;
min-width: 300px;
height: 70vh;
background: whitesmoke;
}
#media screen and (min-width: 1100px) {
.container {
height: auto;
display: grid;
grid-template-columns: 1fr repeat(2, minmax(auto, 30rem)) 1fr;
background: pink;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 2/4;
justify-content: center;
background: cyan;
}
}
I've created a column that contains three circles in it, each stacked on top of the other in a column, which all looks fine when the screen is narrow. But when the browser is widened and I add a media query for when the screen gets wider than 1100px, I want the column of circles to flip to become a single row of circles.
But when I do this using CSS Grid, it doesn't work, and two circles appear on one row, and the third circle appears below the first circle on a second row. You can see it at https://codepen.io/HorrieGrump/pen/ZEKxJgv
I can get it to work if I use flexbox instead (as shown below) by swapping out the current .wrapper block in CSS and using this new one with flexbox, but I'd like to know if it's possible to use CSS Grid instead of flexbox to do this.
Can someone please let me know how to get the media query to flip the column into a single row using CSS Grid – and not have to resort to flexbox?
.wrapper {
display: flex;
flex-direction: row;
grid-template-columns: repeat(2,1fr);
justify-content: space-around;
align-items: center;
grid-column: 2/4;
background: cyan;
}
Edit your media query for .wrapper
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
grid-column: 2/4;
background: cyan;
}
The issue
The last column/padding in a grid disappears when overflow is present. We initially attempted to use padding on our grid. Looking into this question, we were able to confirm that it's not just us facing this challenge.
Unfortunately, the way our app is structured, we're unable to use the suggestions made by some of the answers to that question:
Right border: really more of a hack than a solution, does not work for us.
Pseudo-elements: same as above
What we have
We figured, why not try to place our grid inside another grid and "fake" the padding by making the container grid contain surrounding rows/columns to mimic padding?
It works well to ensure items are of correct width across multiple screen sizes:
3 columns, 2 rows on larger screens
2 columns, 3 rows on medium screens
1 column, 6 rows on smaller screens
It fails again, however, to maintain the last column/row in the grid even though it's specified in pixels. To see this effect, you will need to resize the screen (make it smaller) to show the overflow appear and the last column disappear.
html, body {
margin: 0px !important;
}
.gallery {
position: relative;
display: grid;
grid-template-columns: 22px [main] 1fr 22px;
grid-template-rows: 22px [main] 1fr 22px;
box-sizing: border-box;
align-items: stretch;
justify-items: stretch;
height: 100vh;
width: 100vw;
overflow: auto;
}
.visuals {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
grid-area: main;
align-items: stretch;
justify-items: stretch;
width: 100%;
height: 100%;
gap: 22px;
}
.content {
width: 100%;
height: 100%;
background-color: #444;
color: white;
white-space: nowrap;
}
#media only screen and (max-width: 858px) {
.visuals {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
<div class="gallery">
<div class="visuals">
<div class="content">I have some content here that shouldn't be cut off.</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
Our confusion
According to the documentation:
The new fr unit represents a fraction of the available space in the
grid container.
So I would assume here that the explicitly defined 22px row/column would maintain its size and that 1fr would resize according to the remaining space. The last 22px row/column disappears altogether once the overflow appears.
The question
So, how can we ensure that the last column/row in a grid layout remains visible after the scrollbar appears?
Your problem is not that the outer grid isn't working ok.
The second column is dimensioned ok, but the content overflows it.
I have added overflow hidden in the snippet, and as afar as I can tell, it's working
html, body {
margin: 0px !important;
}
.gallery {
position: relative;
display: grid;
grid-template-columns: 22px [main] 1fr 22px;
grid-template-rows: 22px [main] 1fr 22px;
box-sizing: border-box;
align-items: stretch;
justify-items: stretch;
height: 100vh;
width: 300px;
overflow: auto;
box-shadow: inset 0px 0px 0px 22px red;
}
.visuals {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
grid-area: main;
align-items: stretch;
justify-items: stretch;
width: 100%;
height: 100%;
gap: 22px;
opacity: 0.6;
}
.content {
width: 100%;
height: 100%;
background-color: lightgreen;
white-space: nowrap;
}
#media only screen and (max-width: 858px) {
.visuals {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
<div class="gallery">
<div class="visuals">
<div class="content">this is a long sentence that won't wrap and overflow</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
In the example below, .grid-container has grid-template-rows: 1fr set, but the row does not grow, even though there is plenty of extra room. It seems to behave like grid-template-rows: auto. Any ideas as to what's going on here? As a sidenote, this is a contrived demo for practice, there are better ways to lay this out, but I'm curious about why it doesn't work like I expect. Thanks for any help!
Update - Appears to work as expected in Firefox and Safari, but not Chrome.
.flex-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.grid-container {
flex-grow: 1;
background-color: orange;
display: grid;
grid-template-rows: 1fr;
place-items: center;
}
.grid-item {
padding: 1.5em;
background-color: rgba(0,0,0,.3);
}
nav {
display: flex;
padding: 1em;
justify-content: space-around;
}
body {
margin: 0;
}
<div class="flex-container">
<nav>
Link
Link
Link
Link
</nav>
<div class="grid-container">
<div class="grid-item">Grid Item</div>
</div>
</div>
There are lots of similar questions, I have reviewed all of them, but none solved my problem.
Premises:
I have a flexbox layout with flex column and the bottom flex-item filling the remainder of the page height. The flex-item gets stretched to the remainder of the page by flex 1.
Goal:
I need my grid (with its children) inside this flex-item to expand to the height of the flex-item.
Problem:
The html wrapper only has a min-height 100vh set. This makes the grid stretch to the flex-item, but not its children!
The only solution I can find is to also set height 100vh on the html wrapper, but I do not want to do this. Is there any way to solve my problem without setting height?
See the codepen here:
https://codepen.io/mesqueeb/pen/aGeKjm
See the animated GIF here to show you what I mean:
You can try this.
remove the flex-direction: column; in the .remaining and it will expand the height.
main{
min-height: calc(100vh - 51px);
display: flex;
flex-direction: column;
}
div{
border: solid goldenrod thick;
padding: 2px;
margin: 2px;
}
.full-page{
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
}
.top-row{
height: 100px;
}
.remaining{
flex: 1;
display: flex;
}
.grid{
border: solid teal thick;
flex: 1;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.key{
border: thin green solid
}
.small{
font-size: .8em
}
<main>
<div class="full-page">
<div class="top-row">
grid below will take full height only if body height is set...
</div>
<div class="remaining">
<div class="grid">
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">C</div>
<div class="key">0</div>
<div class="key">âž•</div>
</div>
</div>
</div>
</main>
Not sure if it solves your problem in the best way, but this works:
.remaining {
flex: 1;
/* display: flex; */
flex-direction: column;
position: relative;
}
.grid {
border: solid #008080 thick;
/* flex: 1; */
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
When adjusting the window-size, I want grid item 'C' to fill up the empty space left by grid item 'B' (the profile picture). I used align-self: start; on grid item 'B' to make sure it stays square shaped. Because of this I end up with an 'empty' space when i resize my window. I would like grid item 'C' to fill up this space, with the normal grid-gap in between.
View the problem and code in real life at
https://codepen.io/SanderNiesten/pen/mxaEme?editors=1100 or https://sanderniesten.github.io/
html:
<!-- About Section -->
<section class="about opacity-body" id="about">
<div class= "a" id="about-text">
<h1>Sander Niesten</h1>
<p>Hi! I'm Sander a 29-year-old (on my way to be) webdeveloper from the Haarlem area. End of 2017 I suddenly bumped into my new ♥ : programming! So I decided to give my life a new course and have not regretted it ever since. The last four months have been an epic adventure. A five week bootcamp at Codaisseur, looking into Ruby, Rails, SQL, Javascript, test driven development and so much more. Next, I got my first taste of React through Codecademy and build my first 2 React app's and a cool little minesweeper game. The FreeCodeCamp course is now on my menu. And in the future? Hopefully a traineeship and much more cool stuff to learn!</p>
</div>
<div class="b">
<img id="profile-picture" src="https://source.unsplash.com/random/400x400" alt="">
</div>
<div class="c">
<i class="far fa-file-alt"></i>
</div>
</section>
css:
/* About */
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.about
{
display: grid;
background-position: center;
background-size: cover;
grid-auto-rows: minmax(100px, auto);
grid-template-columns: 1fr;
grid-gap: 20px;
grid-template-areas:
"a"
"b"
"c";
}
.about > div {
background-color: rgba(114, 133, 144, 0.95);
padding: 1em;
justify-items: center;
align-items: center;
}
.b {
padding-top: auto;
padding-bottom: auto;
align-self: start;
}
#profile-picture {
display: inline-block;
max-width: 100%;
border-radius: 50%;
box-sizing: border-box;
border-style: solid;
border-width: 4px;
border-color: white;
}
.c {
display: grid;
justify-items: center;
align-items: center;
justify-self: stretch;
}
.fa-file-alt {
font-size: 3.5em;
color: white;
justify-items: center;
align-items: center;
}
#media(min-width: 701px)
{
.about
{
grid-template-columns: repeat(10, 1fr);
grid-template-areas:
"a a a a a a b b b b"
"a a a a a a b b b b"
"a a a a a a c c c c";
}
.grid
{
font-size: 1.1em;
display: grid;
max-width: 920px;
margin: 0 auto;
grid-template-columns: 1fr;
grid-gap: 1em;
}
nav ul
{
display: grid;
padding: 0;
list-style: none;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
.toggle
{
display: none;
}
}
If I understand your question ok, you want that , when narrowing the screen, but before the media query tekes place, the c element gets adjacent to the square image.
If this is the case, you need to set
.about {
display: grid;
background-position: center;
background-size: cover;
grid-auto-rows: auto auto 1fr; /* changed */
grid-template-columns: 1fr;
grid-gap: 20px;
grid-template-areas:
"a"
"b"
"c";
}
Because you have 3 rows, the image is spanning the first 2, and you want the c element that is on the third row to take up the remaining space
forked codepen
A minimal example showing your request. Hover it to see how it adapts the size
.about {
margin: 10px;
width: 800px;
height: 400px;
border: solid 1px black;
display: grid;
grid-template-areas: "a b" "a c";
grid-template-columns: 60% 40%;
grid-auto-rows: auto 1fr;
transition: width 3s;
}
.about:hover {
width: 400px;
}
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.b2 {
max-width: 100%;
}
.c {
background-color: lightblue;
grid-area: c;
}
<section class="about">
<div class="a">
<p>Hi! I'm Sander a 29-year-old (on my way to be) webdeveloper from the Haarlem area. End of 2017 I suddenly bumped into my new ♥ : programming! So I decided to give my life a new course and have not regretted it ever since. The last four months have been an epic adventure. A five week bootcamp at Codaisseur, looking into Ruby, Rails, SQL, Javascript, test driven development and so much more. Next, I got my first taste of React through Codecademy and build my first 2 React app's and a cool little minesweeper game. The FreeCodeCamp course is now on my menu. And in the future? Hopefully a traineeship and much more cool stuff to learn!</p>
</div>
<div class="b">
<img class="b2" src="https://source.unsplash.com/random/400x400">
</div>
<div class="c">
</div>
</section>