A specific text can't be put in the center in CSS grid.
I have a grid CSS but the text "Post Manager" seems to not go to center. I have made grid items into flex container but only this text seem to not follow the rule. Any thought is appreciated. Thank you.
body {
font-family: sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
width: 100vw;
height: 100vh;
}
.gn {
background-color: #7fd2f0;
grid-row: 1 / 16;
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotateZ(180deg);
}
.ab {
background-color: #85fedd;
grid-column: 2/16;
}
.pm {
background-color: #f7f7f7;
grid-row: 2/16;
grid-column: 2/5;
text-align: center;
}
.wp {
background-color: #c6c6c6;
grid-column: 6/16;
grid-row: 2/16;
}
.center-text {
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div class="center-text gn">Global Navigation</div>
<div class="center-text ab">Application Bar</div>
<div class="center-text pm">Post Manager</div>
<div class="center-text wp">Writing Space</div>
</div>
try this.
.pm {
grid-column: 2/6;
}
Related
This might very well be the stupidest question but why is the border radius of items changing when you zoom the viewport by Ctrl + mousewheel or through browser zoom? (To test it, run the code snippet below and open it in full page, then zoom in and out) The border radius is set in pixels, so why is it changing? Also, I always have to use flex layout to center text vertically inside a container, is there a better way to vertically a text? Setting display: inline-block and vertical-align: middle is not working.
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: 12px;
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>
I think, you want only the text to be zoomed and the border radius to look the same. Therefor you could use a screen dependent value like vw or vh. For example:
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
Working example:
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</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 am unable to align text in the center of the grid, both vertical and horizontally, because nothing that I tried seems to work, so I wanted to know what is the problem with my code or how should I do it.
I tried using justify-items: center, align-items: center and even place-items: center center;
This is a my full, hopefully, you can give it a try and see what is wrong with it.
<title> Learning Grid </title>
<style>
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
</body>
To align the text, you could use the line-height approach, but that is not very responsive.
Since you already have the grid layout, you can keep that same idea and add a helper element, like a <span>. Doing that, give you more options to alight the actual text.
Here is an example of how your new HTML would look like:
<main>
<span>Main</span>
</main>
And the CSS for that would be:
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: grid;
}
main > * {
margin: auto;
}
For aligning text to center just use this property: display: flex; align-items: center; justify-content: center;
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: flex;
align-items: center;
justify-content: center;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
You can use Bootstrap classes for example :
<main class="text-center justify-content-center align-items-center"> Main </main>
Or aligning text over CSS
main {
display: flex;
justify-content: center;
align-items: center;
}
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 am trying to create three items inside of a nested grid item. As you can see from the code, I've put the 'panels' div in-between the 'jumbo' and 'content' divs. I also nested three divs inside. In the CSS, I added a nested grid inside of .panels.
I want the 'panels' div to be split in three equally size parts on the vertical axis. Imagine three square blocks stack one after another. But the nested items don't fill the entire 'panels' div. If you run the code snippet, you can see that the panels are nested but don't take up the entire space. They take up a small percentage of their parent. I added background-color: white !important to one of the nested panels to show how small it is.
Another example can be seen here: https://codepen.io/rachelandrew/pen/NqQPBR/
But again, the nested E, F and G items don't expand to fill up the entire D section.
Is there a way to make the three panels fill in their parent?
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
.panels > div:nth-child(1n) {
background-color: #96ceb4;
}
<div class="container">
<div class="header">
HEADER
</div>
<div class="jumbo">
JUMBO
</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">
CONTENT
</div>
<div class="footer">
FOOTER
</div>
</div>
You have align-items: center applied to the nested grid container (.panels).
With that rule, you override the default align-items: stretch, which would set your grid items to the full height of the parent. Instead, you have the items vertically centered.
So they can be full height, remove align-items: center from the .panels element:
.container > div:not(.panels) {
align-items: center;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
/* align-items: center; */
font-size: 2em;
color: #ffeead;
}
/* new */
.container > div:not(.panels) {
align-items: center;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n) { background-color: #96ceb4; }
<div class="container">
<div class="header">HEADER</div>
<div class="jumbo">JUMBO</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Then, to vertically center the content of .panels, I would target the content directly:
.panels > div {
display: flex;
align-items: center;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
/* align-items: center; */
font-size: 2em;
color: #ffeead;
}
/* new */
.container > div:not(.panels) {
align-items: center;
}
/* new */
.panels > div {
display: flex;
align-items: center;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n) { background-color: #96ceb4; }
<div class="container">
<div class="header">HEADER</div>
<div class="jumbo">JUMBO</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Keep in mind that there are three structural levels in a grid container:
the container
the item (child of the container)
the content (child of the item)
Grid properties only work between parent and child.
So when you apply grid centering properties on the container, they apply to the item, not the content. To center the content, you need to treat the item as parent and content as child.
There's a more in-depth explanation of these concepts and methods here: Centering in CSS Grid
Well, what you have done is, you created three columns inside the 'panels' div:
grid-template-columns: repeat(3, 1fr);
But you gave the children only a position for the row (twice):
grid-row: 1 / 2;
grid-row: 1;
So if you change 'columns' to 'rows' in '.panels' and clean up the code for '.panel1' it should work like a cham!
Thank you all for your suggestions. I solved the issue by removing the nested 'panel' and simply creating three different panels to fill the same space.
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: 50px 218px 218px 200px 80px 530px 40px;
}
.header {
grid-column: 1 / -1;
position: sticky;
top: 0;
z-index: 3;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panel1 {
background-color: white !important;
z-index: 1;
grid-column: 3 / 6;
grid-row: 4 / 6;
}
.panel2 {
background-color: black !important;
z-index: 1;
grid-column: 6 / 9;
grid-row: 4 / 6;
}
.panel3 {
background-color: purple !important;
z-index: 2;
grid-column: 9 / 12;
grid-row: 4 / 6;
}
.content-left {
grid-column: 1 / 5;
grid-row: 5 / 7;
}
.content-right {
grid-column: 5 / -1;
grid-row: 5 / 7;
display: grid;
grid-gap: 5px;
align-items: start;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr)
}
.content-right > div {
background-color: white;
z-index: 2;
}
.footer {
grid-column: 1 / -1;
}
.container > div {
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
.panels > div:nth-child(1n) {
background-color: #96ceb4;
}
<div class="container">
<div class="header">
HEADER
</div>
<div class="jumbo">
JUMBO
</div>
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
<div class="content-left">
CONTENT-LEFT
</div>
<div class="content-right">
<div class="content-right1">1</div>
<div class="content-right2">2</div>
<div class="content-right3">3</div>
<div class="content-right4">4</div>
<div class="content-right5">5</div>
<div class="content-right6">6</div>
</div>
<div class="footer">
FOOTER
</div>
</div>