I'm trying to display header's elements in the first column with display: grid;
Here a snippet, plus a [codepen]
.grid-container {
margin: 1rem;
display: grid;
grid-template-columns: 2fr 2fr 1fr;
align-items: baseline;
}
.h1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.h2 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.flex {
display: flex;
}
.col {
flex-direction: column;
margin: 1rem;
}
body {
background-color: aliceblue;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;
}
p {
margin: 0;
}
.presentation {
margin-bottom: 3rem;
}
.box {
margin: 1rem 2rem;
padding: 1rem;
background-color: #000;
color: white;
width: 80%;
}
.ok {
background: green;
}
.not-ok {
background: darkred;
}
<body>
<div class="presentation">
<h1>Hi there</h1>
<p>I'm trying to display the headers in the 1st column with grid</p>
</div>
<div class="box ok">
<div>Result wanted using flexbox</div>
<div class="flex">
<div class="col">
<div>header 1</div>
<div>header 2</div>
</div>
<div class="col">
<div>b0</div>
<div>b1</div>
</div>
<div class="col">
<div>c0</div>
<div>c1</div>
</div>
</div>
</div>
<div class="box not-ok">
<div>Grid example not working</div>
<div class="grid-container">
<div class="h1">header 1</div>
<div class="h2">header 2</div>
<div>b0</div>
<div>b1</div>
<div>c0</div>
<div>c1</div>
</div>
</div>
</body>
Thanks you for the help,
PS : I saw this post but it's 10 years old so..
So assign the headings to the first column.
div {
outline: 1px solid grey;
padding: 0 0.5em
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 1em;
grid-auto-flow: column;
}
.h1,
.h2 {
grid-column: 1;
}
<div class="grid-container">
<div class="h1">header 1</div>
<div class="h2">header 2</div>
<div>b0</div>
<div>b1</div>
<div>c0</div>
<div>c1</div>
</div>
If you use the HTML structure that you have for the flex example then you can use grid, telling items which column they are to go into by selection using nth-child.
.grid {
margin: 1rem;
display: grid;
grid-template-columns: 2fr 2fr 1fr;
align-items: baseline;
}
.grid .col:nth-child(1) div {
grid-column: 1 / 2;
}
.grid .col:nth-child(2) div {
grid-column: 2 / 3;
}
.grid .col:nth-child(3) div {
grid-column: 3 / 4;
}
body {
background-color: aliceblue;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;
}
<div class="box ok">
<div>Result wanted using grid</div>
<div class="grid">
<div class="col">
<div>header 1</div>
<div>header 2</div>
</div>
<div class="col">
<div>b0</div>
<div>b1</div>
</div>
<div class="col">
<div>c0</div>
<div>c1</div>
</div>
</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>
My code has a grid inside a grid on the css, the grid(that is inside) needs to be at the horizontal center of the grid in which it is contained. The problem here is that this block(grid) appears on the upper left side of the grid when it should be at the middle part. How can I achieve this process?
.wrapper {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr;
grid-gap: 5px;
height: 100vh;
padding: 5px;
}
.wrapper .user-profile {
padding: 40px;
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
width: 100%;
background: red;
overflow: auto;
font-family: sans-serif;
letter-spacing: 1.5px;
border-radius: 20px;
}
.user-header {
justify-content: center;
align-self: center;
}
.user-header .grid-header {
width: 46%;
display: grid;
margin: auto;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50% 20% 80%;
grid-gap: .2rem;
grid-auto-flow: row;
}
.grid-header-item {
display: flex;
justify-content: center;
align-items: center;
}
.grid-header-items:nth-child(10) {
grid-column: 1 / span 2;
grid-row: 4;
width: 100%;
}
<div class="wrapper">
<div class="user-profile">
<div class="user-header">
<div class="grid-header">
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
<div class="grid-header-item">Hey</div>
</div>
</div>
</div>
</div>
If you have any questions please let me know in the comments below;)
I have a problem with how i am supposed to center my text in the middle of the box and get my number (01, 02 etc) in the top left corner?
I am using flexbox to first center all my contents and then align-self my heading to flex start. All fine and dandy but as you can see my heading is not in the top right corner. How would i make sure the heading is in the top left corner and my text is in the center of the box and not slightly off center?
I have tried to set margin right on auto to push the heading to the left, it works but my text is then pushed all the way to the right.
How would I go ahead of fixing this?
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
min-height: 354.48px;
max-height: 354.48px;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.box h2 {
font-size: 2rem;
}
.how-it-works {
background-color: #c7ddea;
}
.O1 {
background-color: white;
}
.O1 h2 {
align-self: flex-start;
}
.O2 {
background-color: #e7e7e7;
}
.O2 h2 {
align-self: flex-start;
}
.O3 {
background-color: #fff;
}
.O3 h2 {
align-self: flex-start;
}
.O4 {
background-color: #f17949;
}
.O4 h2 {
align-self: flex-start;
}
.O5 {
background-color: #fff;
}
.O5 h2 {
align-self: flex-start;
}
<footer>
<div class="box how-it-works">
<h1>How it works?</h1>
</div>
<div class="box O1">
<h2>01</h2>
<p>Answer a few questions about yourself</p>
</div>
<div class="box O2">
<h2>02</h2>
<p>Choose a plan. Get a quote.</p>
</div>
<div class="box O3">
<h2>03</h2>
<p>Answe some questions about your medical history</p>
</div>
<div class="box O4">
<h2>04</h2>
<p>Wait 90 sec to get approved.</p>
</div>
<div class="box O5">
<h2>05</h2>
<p>Done!</p>
</div>
</footer>
You could do something like this:
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
position: relative;
min-height: 354.48px;
max-height: 354.48px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
}
.box h2 {
font-size: 2rem;
line-height: 0;
position: absolute;
top: 1rem;
left: 1rem;
}
.box p {
text-align: center;
}
.how-it-works {
background-color: #c7ddea;
}
.O1 {
background-color: white;
}
.O2 {
background-color: #e7e7e7;
}
.O3 {
background-color: #fff;
}
.O4 {
background-color: #f17949;
}
.O5 {
background-color: #fff;
}
<footer>
<div class="box how-it-works"><h1>How it works?</h1></div>
<div class="box O1">
<h2>01</h2>
<p>Answer a few questions about yourself</p>
</div>
<div class="box O2">
<h2>02</h2>
<p>Choose a plan. Get a quote.</p>
</div>
<div class="box O3">
<h2>03</h2>
<p>Answe some questions about your medical history</p>
</div>
<div class="box O4">
<h2>04</h2>
<p>Wait 90 sec to get approved.</p>
</div>
<div class="box O5">
<h2>05</h2>
<p>Done!</p>
</div>
</footer>
If I understood well what you need, one solution could be adding this to .box class:
.box{
flex-direction: column;
}
I want the "Next" button of this section to go full width when the other div has been taken away. I need the middle div to stay as part of the same container as I will be putting this in the middle in a media query for tablet / desktop.
<div class="container">
<div class="item item--1">Page 1 of 20</div>
<div class="item item--2">Previous</div>
<div class="item item--3">Next</div>
</div>
<div class="container" style="margin-top: 40px;">
<div class="item item--1">Middle</div>
<div class="item item--2">Next</div>
</div>
.container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.item {
background: yellow;
border: 1px solid grey;
text-align: center;
}
.item--1 {
text-align: center;
grid-row: 1;
grid-column: 1 / span 2;
}
.item--2 {
grid-row: 2;
grid-column: 1fr;
}
.item--3 {
grid-row: 2;
grid-column: 1fr;
}
https://codepen.io/chrismorrison/pen/xjjwxQ?editors=1100
You can do this by retaining the class on the "Next" div (there seems little reason to change it) and the targeting it differently when it follows the "Previous" div using the adjacent selector. +
.container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.item {
background: yellow;
border: 1px solid grey;
text-align: center;
}
.item--1 {
text-align: center;
grid-row: 1;
grid-column: 1 / span 2;
}
.item--2 {
grid-row: 2;
grid-column: 1;
}
.item--3 {
grid-row: 2;
grid-column: 1 / span 2;
}
.item--2 + .item--3 {
grid-column: 2 / span 1;
}
<div class="container">
<div class="item item--1">Page 2 of 20</div>
<div class="item item--2">Previous</div>
<div class="item item--3">Next</div>
</div>
<div class="container" style="margin-top: 40px;">
<div class="item item--1">Page 1 of 20</div>
<div class="item item--3">Next</div>
</div>
Frankly, a better solution would be flexbox like so. This works with both Previous and Next buttons out of the box.
.container {
display: flex;
flex-wrap: wrap;
margin-top: 20px
}
.item {
background: yellow;
border: 1px solid grey;
text-align: center;
}
.item--1 {
text-align: center;
flex: 1 0 100%;
}
.item--2,
.item--3 {
flex: 1;
}
<div class="container">
<div class="item item--1">Page 1 of 20</div>
<div class="item item--3">Next</div>
</div>
<div class="container">
<div class="item item--1">Page 2 of 20</div>
<div class="item item--2">Previous</div>
<div class="item item--3">Next</div>
</div>
<div class="container">
<div class="item item--1">Page 20 of 20</div>
<div class="item item--2">Previous</div>
</div>
Using CSS Grid, I'm trying to create a layout that looks like this:
How do I place the bottom (smaller) elements beyond the first row without using nested elements? The number of smaller elements can be anything. I tried using grid-auto-columns: 2fr; to accomplish my task, but it does not work.
Here's what I've tried so far: Codepen
main {
display: grid;
padding: 10px 0 10px 10px;
grid-template: 1fr/repeat(6, 1fr);
grid-template-areas: "a a a b b b";
grid-auto-columns: 2fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
main .a {
grid-area: a;
}
main .b {
grid-area: b;
}
.cat {
height: 150px;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
background-color: green;
color: #fff;
}
.cat:hover {
background-color: #004800;
}
<main>
<div class="cat a"></div>
<div class="cat b"></div>
<div class="cat c"></div>
<div class="cat d"></div>
<div class="cat e"></div>
<div class="cat f"></div>
<div class="cat g"></div>
<div class="cat h"></div>
<div class="cat i"></div>
</main>
The first thing I did is define how many columns the grid should be. Looking at your image, it made sense to me to go with 12 columns.
In the main element, I add the rule:
grid-template-columns: repeat(12, 1fr);
In your .cat rules, I added a few things. By default, each block takes up 4/12 columns.
grid-column: span 4;
The last part was dealing with the first two .cat blocks, a and b. No problem. They each take up 6/12 columns.
&.a,
&.b {
grid-column: span 6;
}
And that's it. Here's a working demo.
main {
display: grid;
padding: 10px 0 10px 10px;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.cat {
height: 150px;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
background-color: green;
color: #fff;
grid-column: span 4;
}
.cat:hover {
background-color: #004800;
}
.cat.a,
.cat.b {
grid-column: span 6;
}
<main>
<div class="cat a"></div>
<div class="cat b"></div>
<div class="cat c"></div>
<div class="cat d"></div>
<div class="cat e"></div>
<div class="cat f"></div>
<div class="cat g"></div>
<div class="cat h"></div>
<div class="cat i"></div>
</main>