I am trying to center a grid display within an element 100% the size of a page, while making a space around the whole grid. I have tried auto margins, but the grid is sticking to the top of the parent. When adding manual margins, the body pushes down the grid's parent element acting as the margin of the grid. I have also tried another div within the parent element spacing the grid halfway down. Is there any way to do this cleaner (without the spacer)?
HTML:
<html>
<body>
<main>
<div class="spacer"></div>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</main>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
main {
height: 100%;
width: 100%;
}
.spacer {
height: 10%;
}
.grid {
display: grid;
height: 80%;
width: 90%;
grid-template: 1fr 2fr 1fr / 1fr 2fr 1fr;
margin: auto;
}
JSFIDDLE:
https://jsfiddle.net/593Lovxw/22/
Try this:
html, body {
height: 100%;
width: 100%;
}
main {
background: #f00;
height: 100%;
width: 100%;
display: flex;
vertical-align: center;
}
.spacer {
background: orange;
height: 10%;
}
.grid {
display: grid;
height: 80%;
width: 90%;
grid-template: 1fr 2fr 1fr / 1fr 2fr 1fr;
margin: auto;
}
.grid div {
background: #00f;
border: thick solid black;
}
<html>
<body>
<div class="spacer"></div>
<main>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</main>
</body>
</html>
Related
I have a grid with two rows and three columns that looks like the image bellow.
I'm using the following CSS properties for the grid:
.grid-container{
display:grid;
grid-template-columns: 20vw 60vw 20vw;
grid-template-rows:100px calc(100vh - 100px);
}
I could just do the following to set the background color of the first row to white:
.grid-container > div:nth-child(1),
div:nth-child(2),
div:nth-child(3) {
background: white;
}
But is this a good approach ? Is there a way to color the grid template row directly in the .grid-container class ??
Snippet
body{margin:0}
.grid-container{
display:grid;
grid-template-columns: 20vw 60vw 20vw;
grid-template-rows:100px calc(100vh - 100px);
}
.grid-container > div:nth-child(1),
div:nth-child(2),
div:nth-child(3) {
background: blue;
}
.grid-container > div {
border:1px solid black;
}
<div class="grid-container">
<!-- header -->
<div></div>
<div></div>
<div></div>
<!-- main content -->
<div></div>
<div></div>
<div></div>
</div>
Best way = use a class selector.
body {
margin: 0
}
.grid-container {
display: grid;
grid-template-columns: 20vw 60vw 20vw;
grid-template-rows: 100px calc(100vh - 100px);
}
.first-row {
background: blue;
}
.first-row.third {
background-color: lightblue;
}
.grid-container>div {
border: 1px solid black;
}
.main {
background-color: orange;
}
<div class="grid-container">
<!-- header -->
<div class="first-row"></div>
<div class="first-row"></div>
<div class="first-row third"></div>
<!-- main content -->
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
</div>
I'm trying to achieve this result, using css only: I have a container with a bunch of children inside. I would like the first child to stretch vertically and having the other children to wrap beside the first child.
expected result
this is the code:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
width: 350px;
border: 1px solid;
}
.container div {
min-height: 30px;
width: 100px;
background: green;
margin: 3px;
}
.container div:first-child {
background: red;
align-self: stretch;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
this is how it looks
But apparently it is not possible with flexbox. Is there any other solutions?
I know I can achieve this by taking the first child out of the container and treat it separately. But I was wondering if I could do it without changing the markup?
Thank you all!
You need CSS grid for this. Resize the container to see the result:
.container {
display: grid;
grid-template-columns: repeat(auto-fit,100px); /* width of your element */
width: 350px;
border: 1px solid;
/* resize the container*/
overflow: auto;
resize: horizontal;
}
.container div {
min-height: 30px;
background: green;
margin: 3px;
}
.container div:first-child {
background: red;
grid-area:1/1/span 200; /* 1s row/1st column/ take many rows (stretch)*/
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
position: absolute can also do the job since the width is fixed:
.container {
display: flex;
flex-wrap: wrap;
padding-left: 106px;
width: 350px;
border: 1px solid;
position: relative;
/* resize the container*/
overflow: auto;
resize: horizontal;
}
.container div {
min-height: 30px;
width: 100px;
background: green;
margin: 3px;
}
.container div:first-child {
background: red;
position: absolute;
inset: 0 auto 0 0;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Why justify-content: space-between doesnt work in this case? I want to push the last item to the right edge and center the middle one.
div{
background: lightblue;
width: 8rem;
height: 8rem;
}
main{
margin: 2rem auto;
width: 80%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5rem 0rem;
background: yellow;
justify-content: space-between;
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
You're almost there, but instead of using fractional unit fr, you should use a fixed size 8rem (aligned with your box size).
fr has been stretching your grid box, so that's why you cannot apply justify-content without spare space.
div{
background: lightblue;
width: 8rem;
height: 8rem;
}
main{
margin: 2rem auto;
width: 80%;
display: grid;
grid-template-columns: repeat(3, 8rem); /*Modify 1fr to 8rem*/
gap: 5rem 0rem;
background: yellow;
justify-content: space-between;
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
div{
background: lightblue;
padding: 20px 0;
}
main{
display: grid;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
gap: 5rem 0rem;
background: yellow;
justify-content: space-between;
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
//you must use percent not absolute
My grid-container class does not extend vertically, but does extend horizontally. Size is set in percentages. How can I make my grid cells stretch in both directions?
.container {
width: 20rem;
height: 20rem;
margin: 0 1rem;
border: 1px solid black;
}
.grid-container{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
Set the width and height to the grid cell to be 100%. This will make the grid cell stretch out both vertically and horizontally
.container {
width: 20rem;
height: 20rem;
margin: 0 1rem;
border: 1px solid black;
}
.grid-container{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
border: 1px solid red;
}
You can use padding instead of using height because the height define what exactly the height should be but the padding cause both height and width to expand depending on the inside items so, padding will affect both your height and width and you'll find that your grid-container grows bigger because of the padding and the solution for that is to reduce the value of the padding and width
.container {
width: 20rem;
padding: 20rem;
margin: 0 1rem;
border: 1px solid black;
}
.grid-container{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
and I'd seen that there is nowhere you'd set the grid-container's width or height and I guess it'll be better if you determine that
I want to use the new grid module in CSS but it isn't working.
This is the code I have:
div {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
p {
grid-column-start: 2;
grid-row-start: 2;
}
<div>
<p>
Hello World! :D
</p>
</div>
It is working properly, you just need to visualise it better. Try adding some other child elements to your main container, you'd see Hello world is positioned where it should be. It is just because you have empty space all around, you are having difficulty
div.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
background: green;
}
div {
background: yellow;
padding: 10px;
background-clip: content-box;
}
p {
grid-column-start: 2;
grid-row-start: 2;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>
Hello World! :D
</p>
</div>