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>
Related
I am trying to make a dynamic grid layout containing 1-4 elements. They achieved something close to what I am looking for at https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/ under the "dynamic layouts" section. But slightly different.
The CSS for this layout:
.grid {
display: grid;
}
.grid :nth-child(2) {
grid-column-start: 2;
}
.grid :nth-child(3):last-child {
grid-column-start: span 2;
}
I am trying to do something similar but different, but I cannot get it. This is a picture of what I want to achieve:
You can use the CSS nth-last-child selector to spot when the first child is the first of three children.
.grid {
display: grid;
}
.grid :nth-child(2) {
grid-column-start: 2;
}
.grid :nth-child(1):nth-last-child(3) {
grid-row-start: span 2;
}
/**/
.grid {
width: 300px;
aspect-ratio: 1;
grid-gap: 5px;
outline: 2px solid red;
vertical-align: top;
margin: 10px;
counter-reset: num;
}
.grid * {
border: 2px solid;
font-size: 30px;
box-sizing: border-box;
font-family: sans-serif;
display: grid;
place-content: center;
}
.grid *:before {
content: counter(num);
counter-increment: num;
}
<div class="grid">
<div></div>
</div>
<div class="grid">
<div></div>
<div></div>
</div>
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid">
<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
I'm trying to make grid layout. This is code:
<div class="wrapper">
<div class="header">HEADER</div>
<div class="nav">NAV
</div>
<div class="aside-left">LEFT</div>
<div class="main">MAIN
<img src="a1.jpeg">
<img src="a1.jpeg">
<img src="a1.jpeg">
</div>
<div class="aside-right">RIGHT</div>
<div class="footer">FOOTER</div>
</div>
</body>
.wrapper{
height: 100%;
width: 100%;
background-color: ghostwhite;
display: grid;
grid-template-columns: repeat(12,1fr);
grid-template-rows: minmax(100px,auto);
grid-gap:5px;
}
.header{
grid-column: 1/13;
grid-row: 1/2;
}
.nav{
grid-column: 1/13;
grid-row: 2/3;
}
.aside-left{
grid-column: 1/3;
grid-row: 3/10;
}
.main{
grid-column: 3/11;
grid-row: 3/10;
}
.aside-right{
grid-column: 11/13;
grid-row: 3/10;
}
.footer{
grid-column: 1/13;
grid-row:10/12;
}
I want class main to stretch to fit it's content and it is working, but .nav and .footer doesn't take up their min height 100px, but they seem to take up auto height too, however header class works correctly, so any ideas? I want other elements to have at least 100px height
I figured out answer:
body, html{
background-color: ghostwhite;
height: auto;
}
.wrapper{
max-height: auto;
width: 100%;
background-color: ghostwhite;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: minmax(100px,auto);
grid-gap:5px;
}
it seems 100% height was factoring out other elements' height, while increasing others'
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>
I am iterating over a list of items(red boxes). I have another element not part of this list that I want to insert into the items' grid in the top right(tall blue box). I am using flexbox and order to position it accordingly. But I want the 2nd row of red items to be 3 items wide and wrap inline with the blue aside. Screenshot of my ideal outcome below. Code at the bottom of my failed attempt.
.flex {
display: flex;
flex-wrap: wrap;
margin: auto;
max-width: 120px;
}
.flex>div {
background: red;
height: 25px;
width: 25px;
margin: 2px;
order: 3;
}
.flex>div:nth-child(-n+3) {
order: 1;
}
aside {
height: 55px;
width: 25px;
margin: 2px;
background: blue;
order: 2;
}
<div class="flex">
<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>
<aside></aside>
</div>
Worth noting that I know I can do this with floats but for other reasons unrelated to this problem I'm kind of stuck with flexbox. Open to any & all suggestions though.
Here is the problem you're facing with flexbox, and several potential solutions:
Is it possible for flex items to align tightly to the items above them?
Make a div span two rows in a grid
Here's a calculator keypad layout using flexbox:
Calculator keypad layout with flexbox
Here's the cleanest and most efficient CSS solution, which uses Grid:
.flex {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25px;
grid-gap: 5px;
margin: auto;
max-width: 120px;
}
aside {
grid-column: 4;
grid-row: 1 / span 2;
background: blue;
}
.flex > div {
background: red;
}
<div class="flex">
<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>
<aside></aside>
</div>
jsfiddle demo
css grid browser support
.flex {
display: flex;
flex-wrap: wrap;
margin: auto;
max-width: 120px;
}
.flex>div {
background: red;
height: 25px;
width: 25px;
margin: 2px;
order: 3;
}
.flex>div:nth-child(-n+3) {
order: 1;
}
aside {
height: 55px;
width: 25px;
margin: 2px;
background: blue;
order: 2;
margin-bottom: -57px; /* added */
}
.flex>div:nth-child(6) { /* added */
margin-right: 27px;
}
<div class="flex">
<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>
<aside></aside>
</div>
Here is a version of another answer of mine, which might also qualify as a duplicate, though since it has a simpler CSS, I decided to post it as an answer.
It uses the order property and absolute position, to enable the required layout.
Read more here: Flexbox or Column CSS for positioning elements like this
Stack snippet
.container {
display: flex;
flex-wrap: wrap;
}
.container .right_corner > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(200% + 10px);
background: blue;
}
.container::before,
.container > div {
height: 50px;
margin: 5px;
}
.container > div:not(:first-child) {
background: red;
}
.container .right_corner {
position: relative;
order: 1;
}
.container::before {
content: '';
order: 3;
}
#media (max-width: 600px){
.container > div:nth-child(n+5) {
order: 2;
}
.container > div:nth-child(n+8) {
order: 4;
}
.container::before,
.container > div {
width: calc((100% / 4) - 10px);
}
}
#media (min-width: 601px) and (max-width: 800px){
.container > div:nth-child(n+6) {
order: 2;
}
.container > div:nth-child(n+10) {
order: 4;
}
.container::before,
.container > div {
width: calc((100% / 5) - 10px);
}
}
#media (min-width: 800px) {
.container > div:nth-child(n+7) {
order: 2;
}
.container > div:nth-child(n+12) {
order: 4;
}
.container::before,
.container > div {
width: calc((100% / 6) - 10px);
}
}
<div class='container'>
<div class='right_corner'>
<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>