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;)
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>
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>
So I've been trying to put an image inside a grid but its causing me problems.
Right now, my biggest issue is that is pushing another grid item down.
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
}
.business {
grid-column: 17;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>
The image in question has a class as business and the item is pushing down has a class as header-title. Header-title should be inside main-info, but when 'business' appears, it pushes header-title down!
!
The issue here is that your image with the business class is overflowing its own grid and the grid of its container.
In order to resolve this add the property overflow: hidden to both the .main-info class and the .business class.
These classes also need the "display: grid" property so the browser can process the grid-column and grid-row property accordingly for those two classes.
Once those additions are made you can tweak the grid-row and grid-column for the the .business class and the .header-title classes accordingly to find your desired positions.
Full CSS and HTML Below:
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
overflow: hidden;
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
display: grid;
}
.business {
grid-column: 17;
overflow: hidden;
display: grid;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>
I'm trying to use CSS grid layout to simulate some responsive behavior, specifically with:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
My example https://codepen.io/elgs/pen/goNxeL works well in Chrome, however, it doesn't seem to work in Firefox. You will find it when you resize the browser horizontally.
Another example https://codepen.io/elgs/pen/YYoxOq works well in both Chrome and Firefox.
html,body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
}
.header {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer {
grid-column: 1/2;
grid-row: 3/4;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.footer .copyright {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
font-size: 12px;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.content {
grid-column: 1/2;
grid-row: 2/3;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0;
background-color: aliceblue;
}
.content .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
grid-auto-flow: dense;
justify-self: center;
width: 100%;
margin-top: 10px;
max-width: 1000px;
}
.placeholder {
height: 100px;
position: relative;
border: 1px solid red;
}
<div class="header">
<div class="title">
<h2>Header</h2>
</div>
</div>
<div class="content">
<div class="main">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Footer</span>
</div>
</div>
I'm wondering whether I have done anything wrong or it's the browser's bug.
Firefox version: 58.0 (64-bit)
Chrome version: Version 64.0.3282.119 (Official Build) (64-bit)
This appears to be a bug in Firefox. But I'm not sure.
Here's what is clear:
The fact that you have nested grid containers matters.
Your second demo, which works in both Chrome and Firefox, has only one grid container.
The first demo, which only works in Chrome, has nested grid containers. If you eliminate that nesting, and use only one grid container, the layout works in both browsers.
So, as a possible cross-browser solution, minimize the nesting of grid containers.
In this revised demo, I've commented out display: grid on the body and .content elements. The only grid container left is on .main, the parent of the red boxes:
revised demo
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
/* display: grid; */
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
}
.header {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer {
grid-column: 1/2;
grid-row: 3/4;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.footer .copyright {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
font-size: 12px;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.content {
grid-column: 1/2;
grid-row: 2/3;
/* display: grid; */
grid-template-columns: 1fr;
grid-template-rows: 0;
background-color: aliceblue;
}
.content .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
grid-auto-flow: dense;
justify-self: center;
width: 100%;
margin-top: 10px;
max-width: 1000px;
}
.placeholder {
height: 100px;
position: relative;
border: 1px solid red;
}
<div class="header">
<div class="title">
<h2>Header</h2>
</div>
</div>
<div class="content">
<div class="main">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Footer</span>
</div>
</div>
In Firefox, a fixed value on max-width prevents the box from shrinking to accommodate smaller screen sizes.
Firefox has a problem shrinking the .main container with a pixel value on the max-width. Chrome does not.
A typical solution that comes to mind is to override the min-width: auto default setting on grid items. This prevents items from shrinking past the size of their content or their defined width.
However, that solution, described here: Prevent content from expanding grid items ... doesn't work in this case.
(Probably because there is no content in and no defined widths on the grid items. The only widths defined are on the grid columns, set on the grid container. So the solution, which applies only to grid items, probably doesn't even apply.)
As a possible workaround, if you must keep the nested containers, then instead of using a fixed value with max-width, use a percentage value. That may work for you.
revised codepen
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
height: 100vh;
margin: 0;
}
.header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.content {
display: grid;
grid-template-columns: 1fr;
/* grid-template-rows: 0; */
align-content: start; /* new */
background-color: aliceblue;
}
.content .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 100px; /* new */
grid-gap: 10px;
grid-auto-flow: dense;
justify-self: center;
width: 100%;
margin-top: 10px;
/* max-width: 1000px; */
max-width: 75%; /* new */
}
.placeholder {
border: 1px solid red;
}
.footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title,
.footer .copyright {
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer .copyright {
font-size: 12px;
}
<div class="header">
<div class="title">
<h2>Header</h2>
</div>
</div>
<div class="content">
<div class="main">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Footer</span>
</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>