I'm trying to create a section on my html where I can show some grids. Can you help me with this please? I'm attaching a pic where I'm showing what I want to do. Yellow color is how it is right now, and blue is the final result.
.wrapper {
display: grid;
grid-gap: 20px;
justify-content: center;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: 1 / 3;
grid-row: 1;
}
.b {
grid-column: 3;
grid-row: 1 / 3;
}
.c {
grid-column: 1;
grid-row: 2;
}
.d {
grid-column: 2;
grid-row: 2;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
</div>
Related
I'm trying to make an "example page" of all the layouts (so one under the other) How do I place a grid wrapper under a flex container and not be shown in the same line? if I remove the display: flex it automatically goes under but flex remains in the same line.
And why do they both have the same salmon background color?
Thanks.
.flex-wrapper {
display: flex;
border: 5px solid rgb(0, 0, 0);
}
.flex-wrapper>div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
Just wrap the boxes of box in a container and put the add a flex-direction to column property in your flex-wrapper css class selector
.flex-wrapper {
display: flex;
flex-direction: column;
border: 5px solid rgb(0, 0, 0);
}
.flex-wrapper .box-container > div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box-container">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
why do they both have the same salmon background color?
Because .flex-wrapper > div applies to every div that's an immediate child of flex-wrapper.
How do I place a grid wrapper under a flex container and not be shown in the same line?
You could add a flex-wrap rule to your flex-wrapper and set the grid item to be wide enough to wrap, as in the example below, but you might consider whether your outer container should be a grid instead of flex. You'd have more control that way.
.flex-wrapper {
display: flex;
border: 5px solid rgb(0, 0, 0);
flex-wrap: wrap; /* <=== */
}
.flex-wrapper>div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
flex: 1 1 100%; /* <=== */
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
Code:
.wrapper {
display: grid;
position: relative;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25vh;
width: 100%;
}
.prova {
border: 1px solid;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
width: 100%;
background-color: none;
overflow: auto;
position: fixed;
}
<div class="wrapper">
<div class="prova">1</div>
<div class="prova">2</div>
<div class="prova">3</div>
<div class="prova">4</div>
<div class="prova">5</div>
<div class="prova">6</div>
<div class="prova">7</div>
<div class="prova">8</div>
<div class="prova">9</div>
<div class="prova">10</div>
<div class="prova">11</div>
<div class="prova">12</div>
</div>
As you can see here, in the last row of the grid there are 4 cells but I'd like them to become just one long cell, or to add another cell below them as bis as I just said!
you can use grid-column: span 4; on your last child to make it span all columns:
.wrapper {
display: grid;
position: relative;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25vh;
width: 100%;
}
.prova {
border: 1px solid;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.wrapper div:last-child {
grid-column: span 4;
}
<div class="wrapper">
<div class="prova">1</div>
<div class="prova">2</div>
<div class="prova">3</div>
<div class="prova">4</div>
<div class="prova">5</div>
<div class="prova">6</div>
<div class="prova">7</div>
<div class="prova">8</div>
<div class="prova">9</div>
<div class="prova">10</div>
<div class="prova">11</div>
<div class="prova">12</div>
<div class="prova">13</div>
</div>
I am learning to work with "grid" and have hit a roadblock. I want to move the last three cells to the top of the grid so that I can put headers before the content but don't know how to do that. Any help is appreciated.
HTML:
<div class="gridWrapper">
<div class="gridBox heading1">Heading</div>
<div class="gridBox heading2">Heading</div>
<div class="gridBox heading3">Heading</div>
<div class="gridBox a">A</div>
<div class="gridBox b">B</div>
<div class="gridBox c">C</div>
<div class="gridBox d">D</div>
<div class="gridBox e">E</div>
<div class="gridBox f">F</div>
</div>
CSS:
.gridWrapper {
color: white;
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: 500px 500px 100px;
background-color: transparent;
padding-left: 50px;
padding-right: 50px;
padding-top: 100px;
justify-content: center;
}
.gridBox {
background-color: white;
color: black;
margin: 0px;
border-radius: 5px;
padding: 20px;
font-size: 100%;
}
.a {
grid-area: 1 / 2 / 2 / 3;
}
.b {
grid-area: 2 / 2 / 3 / 3;
}
.c {
grid-area: 2 / 3 / 3 / 4;
}
.d {
grid-area: 1 / 1 / 1 / 2;
}
.e {
grid-area: 2 / 1 / 3 / 2;
}
.f {
grid-area: 1 / 3 / 2 / 4;
}
This is driving me crazy. Just trying to fit this grid into the entire page with height and vw value. But when I write it on CSS it appears the scroll bar!!! How do I fix this?
Here's the html. It's just a basic thing but I don't know what to do!
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr) 0.1fr;
grid-gap: 10px;
height: 100vh;
}
.a {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 1 / 4;
grid-row: 4 / 7;
}
.b {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 2 / 4;
grid-row: 2 / 4;
}
.c {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 5 / 7;
grid-row: 1 / 3;
}
.name {
grid-column: 1 / 3;
grid-row: 7 / 7;
}
.contact {
grid-column: 4 / 6;
grid-row: 7 / 7;
}
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="name">
<p>Name</p>
</div>
<div class="contact">
<p>Contact</p>
</div>
</div>
Any clues?
You have to reset your margin for html and body. If you still would like to keep padding, you can give it to your .grid class but reduce the equal value from height.
html,
body {
margin: 0
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr) 0.1fr;
grid-gap: 10px;
height: 96vh;
padding: 2vh
}
.a {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 1 / 4;
grid-row: 4 / 7;
}
.b {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 2 / 4;
grid-row: 2 / 4;
}
.c {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 5 / 7;
grid-row: 1 / 3;
}
.name {
grid-column: 1 / 3;
grid-row: 7 / 7;
}
.contact {
grid-column: 4 / 6;
grid-row: 7 / 7;
}
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="name">
<p>Name</p>
</div>
<div class="contact">
<p>Contact</p>
</div>
</div>
This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 4 years ago.
I have a CSS Grid below and I would like the content(letters for now) to be vertically aligned within the cells. What's the best way to accomplish this? vertical-align:middle on the cells doesn't seem to do anything, align-items:center; on the grid container worked, but then the heights were all different.
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col] 100px [col] 100px [col] 100px;
grid-template-rows: [row] auto [row] auto [row] ;
background-color: #fff;
color: #444;
}
.box {
background-color:#444;
color:#fff;
padding:20px;
font-size:150%;
}
.a {
grid-column: col / span 2;
grid-row: row 1 / 3;
}
.b {
grid-column: col 3 / span 1;
grid-row: row ;
}
.c {
grid-column: col 3 / span 1;
grid-row: row 2 ;
}
.d {
grid-column: col / span 1;
grid-row: row 3;
}
.e {
grid-column: col 2 / span 1;
grid-row: row 3;
}
.f {
grid-column: col 3 / span 1;
grid-row: row 3;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
If you just want them vertically centered you can add display:flex; and align-items: center; to the box class:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col] 100px [col] 100px [col] 100px;
grid-template-rows: [row] auto [row] auto [row];
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 150%;
display: flex;
align-items: center;
}
.a {
grid-column: col / span 2;
grid-row: row 1 / 3;
}
.b {
grid-column: col 3 / span 1;
grid-row: row;
}
.c {
grid-column: col 3 / span 1;
grid-row: row 2;
}
.d {
grid-column: col / span 1;
grid-row: row 3;
}
.e {
grid-column: col 2 / span 1;
grid-row: row 3;
}
.f {
grid-column: col 3 / span 1;
grid-row: row 3;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>