What it should do:
1 fr is an image of a product, 1fr is a description of the product (positioned on the right side of the image). the whole grid should be centered in the middle but it isnt. It centers but it leaves a huge gap between them.
HTML:
<div class="grid">
<img src="../images/s6.png" alt="photo of the item">
<div class="text">
<h1 class=>V.2</h1>
<h4>$54.00</h4>
<ul>
<li>Biquíni truangular com detalhes franzidos a lilás</li>
<li>Detalhes metálicos dourados</li>
<li>Alças ajustáveis</li>
<li>Cintura subida reversível</li>
<li>Opçāo de colocar copa</li>
</ul>
</div>
</div>
CSS:
.grid img{
width: 450px;
height: 450px;
border: solid 1px rgb(235, 235, 235);
border-radius: 3%;
padding: 6px;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
justify-items: center;
}
Both your img and div are equal width maintaining the correct gap between them. Your div's contents need to be justified left if you want to close that gap.
.text {
justify-self: start;
}
Here is some more information: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
Related
I'm trying to solve a simple task but the solutions seem not be that simple.
Basically, I want many blocks with the same size to be aligned in center but I nee 1 block that is twice bigger than the others.
If I use FLEX - there are blank spaces around the big block.
If I use GRID - I can't align the blocks in the center.
Please help!
#all {
width: 100%;
border: 1px solid #ff0000;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 150px);
grid-template-rows: repeat(auto-fill, 150px);
}
#all div {
width: 150px; height: 150px;
border: 1px solid #ff0000;
}
#all .big {
width: 310px; height: 312px;
grid-column: 2/ 4;
grid-row: 2 / 4;
}
<html>
<head>
<style>
</style>
</head>
<body>
<div id=all>
<div></div>
<div></div>
<div class=big></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>
I need them to be aligned in the center
Here is an edited answer from W3Schools.
NOTE: there must be enough items to circle the one in the middle.
First, you need to add odd items in the grid.
Then, add odd columns to align them properly as you want.
Last, use grid-area to start any of the items from the 2nd row and column. then end it at the other corner according to the number of items in the grid.
and the good thing about this is that it's responsive and you can select any item to put it in the middle.
here is the code.
.grid-container {
display: grid;
grid-template-columns: auto auto auto ; /* odd column */
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item5 {
grid-area: 2 / 2 / 4 / 3; /* start and end the selected item */
display: flex;
justify-content: center;
align-items: center;
}
<h1>The grid-column Property</h1>
<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<div class="grid-container">
<!-- add odd items in the grid -->
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
</div>
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>
I have a CSS grid with 3 rows. There may be less than 3 items to fill it, and I want to start filling it from the bottom.
I've created a jsFiddle for you to play with, but it currently fails to do what I want.
html, body, div {
height: 100%;
}
div {
display: grid;
grid-template-columns: 1;
grid-template-rows: repeat(3, 1fr);
/* MISSING RULE */
}
<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>
Actual output:
Last item
Second last item
Top item
Desired output:
Top item
Second last item
Last item
I'd like to apply one rule to the <div> that contains the grid, rather than separate rules to the items in the grid, if that is possible.
There is no column-reverse function in CSS Grid, like there is in flexbox.
Therefore, getting grid areas to populate a container starting from the bottom isn't possible with a single rule in the container.
Here's how it would work in flexbox:
div {
display: flex;
flex-direction: column-reverse;
height: 100vh;
}
p {
flex: 1;
}
/* demo styles */
p {
margin: 0;
background-color: lightgreen;
}
p + p {
margin-bottom: 10px;
}
body {
margin: 0;
}
<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>
If you want to use CSS Grid layout it will be like this. I modify your HTML. You have to write CSS property for grid child item where to start and where to end. grid-row-start: and grid-row-end:. Here is a CodePen.
.grid-item{
border: 2px solid red;
border-radius: 5px;
height: 200px;
padding: 10px;
width: 300px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.grid-item p{
margin: 0;
}
.grid-item .first-item{
grid-row-start: 1;
}
.grid-item .last-item{
grid-row-start: 3;
}
<div class="grid-item">
<p class="last-item">Last item</p>
<p class="second-item">Second last item</p>
<p class="first-item">Top item</p>
</div>
If you want to use flexbox it will be using two line code.
<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>
CSS for this
div{
display: flex;
flex-direction: column-reverse;
}
The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
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;
}
Is it possible to collapse the width of a CSS grid with auto-filled columns to the minimal width required to have equal width columns that are centered with respect to the grid container?
IE if I have grid defined like this:
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
and the grid-container is 800px wide, is there a way to ensure the grid itself is only 600px wide instead of 800px?
Since I'm not sure how to explain it properly I've made a fiddle: https://jsfiddle.net/mhozx4ns/10/
I'm looking for a way that makes the top container behave like the bottom one if it is wider than what is required to place all children in one row.
body {
width: 800px;
background: black;
}
.grid div {
height: 50px;
background: #ededed;
}
.css {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-column-gap: 64px;
grid-row-gap: 64px;
background: red;
}
.manual {
width: 664px;
margin: 32px auto 0;
background: blue;
}
.manual:after {
content: '';
display: table;
width: 100%;
}
.manual.grid div {
width: 300px;
float: left;
margin-bottom: 64px;
}
.manual.grid div:nth-of-type(even) {
margin-left: 64px;
}
.manual.grid div:last-child {
margin-bottom: 0;
}
}
<div class="css grid">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="manual grid">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
When you say minmax(300px, 1fr) in your rule, you're saying this:
Each column must be a minimum width of 300px and a maximum width of 1fr.
The fr unit consumes free space in the grid container. So if your container is 800px wide, the fr will factor in all that space.
Also, since fr consumes all free space, justify-content, which functions by distributing free space, is rendered useless.
Why not just remove the 1fr?
body {
width: 800px;
background: black;
}
.css {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fill, 300px);
grid-auto-rows: 50px;
grid-column-gap: 64px;
grid-row-gap: 64px;
background: red;
}
.grid div {
background: #ededed;
}
<div class="css grid">
<div></div>
<div></div>
<div></div>
</div>