This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 6 months ago.
I've look into several questions but I couldn't find any solution that works for me.
What I'm trying to do it to vertical align the content inside the cell but the only thing I can achieve is to center it at the top but not vertically.
My grid:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25vh;
width: 100%;
padding-top: 40px;
}
.prova {
border: 1px solid;
}
.descrizione {
padding: 10px;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 0 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 2 / 5;
}
.wrapper div:nth-child(6) {
grid-column: 3;
grid-row: 4 / 6;
}
.wrapper div:nth-child(4) {
grid-column: span 2;
}
.wrapper div:last-child {
grid-column: span 4;
}
.wrapper div:first-child {
grid-column: span 2;
}
<div class="prova">
<div class="descrizione">
Sito: <br> Emanuele Pesa
</div>
</div>
here's the link to the page: https://civitonia.com/27051195
make .prova flex and .descrizione margin auto
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25vh;
width: 100%;
padding-top: 40px;
}
.prova {
border: 1px solid;
display:flex;
}
.descrizione {
padding: 10px;
margin:auto;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 0 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 2 / 5;
}
.wrapper div:nth-child(6) {
grid-column: 3;
grid-row: 4 / 6;
}
.wrapper div:nth-child(4) {
grid-column: span 2;
}
<div class="prova">
<div class="descrizione">
Sito: <br> Emanuele Pesa
</div>
</div>
Related
I need to achieve a grid item to be wider than the grid frame.
However, it seems that this is not possible with a standard way.
Any idea?
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
}
.grid-item {
position: absolute;
width: 300px;
}
As you put it, the item is already wider that its grid box. There is no need to add position absolute. For better understanding of what is going on, while working on grid, it is recomended to use firefox since it help you visualize every grid line.
.grid {
display: grid;
background-color: red;
grid-template-columns: 200px 200px 200px;
}
.grid-item1 {
background-color: blue;
width: 300px;
height: 300px;
}
.grid-item2 {
background-color: green;
width: 300px;
height: 300px;
}
.grid-item3 {
background-color: yellow;
width: 300px;
height: 300px;
}
<div class="grid">
<div class="grid-item1"></div>
<div class="grid-item2"></div>
<div class="grid-item3"></div>
</div>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
}
.container {
width: 50vw;
height: 50vh;
border: 1px solid red;
}
.grid {
width: 70vw;
height: 70vh;
margin: -10vh -10vw -10vh -10vw;
position: relative;
display: grid;
grid-template-columns: repeat(7, 10vw);
grid-template-rows: repeat(7, 10vh);
}
.c {
grid-column: 4 / -4;
grid-row: 4 / -4;
}
.n {
grid-column: 4 / -4;
grid-row: 1 / 2;
}
.s {
grid-column: 4 / -4;
grid-row: -2 / -1;
}
.e {
grid-column: -2 / -1;
grid-row: 4 / -4;
}
.w {
grid-column: 1 / 2;
grid-row: 4 / -4;
}
.ne {
grid-column: -2 / -1;
grid-row: 1 / 2;
}
.se {
grid-column: -2 / -1;
grid-row: -2 / -1;
}
.nw {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.sw {
grid-column: 1 / 2;
grid-row: -2 / -1;
}
.c,
.n,
.s,
.e,
.w,
.ne,
.nw,
.se,
.sw {
border: 1px solid #000;
}
<div class="container">
<div class="grid">
<div class="c"></div>
<div class="n"></div>
<div class="ne"></div>
<div class="e"></div>
<div class="se"></div>
<div class="s"></div>
<div class="sw"></div>
<div class="w"></div>
<div class="nw"></div>
</div>
</div>
I have a header that is 70px high, the main content which I want to fill the rest of the screen and then a 70px footer. I am trying to find the most simple approach of hiding a footer. This works with the footer in view - see jsfiddle and snippet below:
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: grid;
margin: 0px;
grid-gap: 10px;
height: 100vh;
grid-template-columns: [side__nav] 250px [main] 1fr;
grid-template-rows: [header] 70px auto [footer] 70px;
}
.header {
grid-column: main;
grid-row: 1;
background: pink;
}
.side__nav {
grid-column: side__nav;
grid-row: 1/span 3;
background: red;
}
.content {
grid-column: main;
grid-row: 2;
background: green;
}
.footer {
grid-column: main;
grid-row: 3;
background: purple;
opacity: 0.5;
}
.a {
grid-column: col/span 2;
grid-row: row;
}
.b {
grid-column: col 3/span 2;
grid-row: row;
}
.c {
grid-column: col/span 2;
grid-row: row 2;
}
.d {
grid-column: col 3/span 2;
grid-row: row 2;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
.e {
grid-column: 1/3;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 2;
}
.g {
grid-column: 2;
grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
But I want to push it off screen so I can use a button to show when needed. I have tried using grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px
which does give me the effect I want see jsfiddle and snippet below:
* {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
display: grid;
margin: 0px;
grid-gap: 10px;
height: 100vh;
grid-template-columns: [side__nav] 250px [main] 1fr;
grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px;
}
.header {
grid-column: main;
grid-row: 1;
background: pink;
}
.side__nav {
grid-column: side__nav;
grid-row: 1/span 3;
background: red;
}
.content {
grid-column: main;
grid-row: 2;
background: green;
}
.footer {
grid-column: main;
grid-row: 3;
background: purple;
opacity: 0.5;
}
.a {
grid-column: col/span 2;
grid-row: row;
}
.b {
grid-column: col 3/span 2;
grid-row: row;
}
.c {
grid-column: col/span 2;
grid-row: row 2;
}
.d {
grid-column: col 3/span 2;
grid-row: row 2;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
.e {
grid-column: 1/3;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 2;
}
.g {
grid-column: 2;
grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
But the problem with that is, If I use grid-gap: 10px I have to
calculate that in grid-template-rows which then gets messy if I add
more sections.
For instance, 3 sections will have 2 gaps, if I set the gap as 10px, the total will be 20px, plus the 70px for the footer meaning a total of 90px. If someone takes over the code they need to know that they need to add this manually to the grid-template-row line which I know will get missed. Anyone have a simple idea that I am missing?
You can remove your footer from the explicit grid (change your explicit grid row definition into grid-template-rows: [header] 70px 1fr and remove grid-row: 3 from footer) and set the grid container height to calc(100vh + 70px) and set the implicit grid row (which is your footer height) using grid-auto-rows: 70px.
See demo below with vanilla CSS:
* {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
display: grid;
margin: 0px;
grid-gap: 10px;
height: calc(100vh + 70px); /* adding footer height */
grid-template-columns: [side__nav] 250px [main] 1fr;
grid-template-rows: [header] 70px 1fr; /* removed footer from here */
grid-auto-rows: 70px; /* implicit grid height - footer height */
}
.header {
grid-column: main;
grid-row: 1;
background: pink;
}
.side__nav {
grid-column: side__nav;
grid-row: 1/span 3;
background: red;
}
.content {
grid-column: main;
grid-row: 2;
background: green;
}
.footer {
grid-column: main;
/*grid-row: 3;*/
background: purple;
opacity: 0.5;
}
.a {
grid-column: col/span 2;
grid-row: row;
}
.b {
grid-column: col 3/span 2;
grid-row: row;
}
.c {
grid-column: col/span 2;
grid-row: row 2;
}
.d {
grid-column: col 3/span 2;
grid-row: row 2;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
.e {
grid-column: 1/3;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 2;
}
.g {
grid-column: 2;
grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
But again you'll have to do those messy calculations when new sections are added to the grid. A more dynamic option is to keep a grid item (zero-width adjuster element in demo below) just for setting the layout height:
placed in the first column and spanned across the first two rows
has height: 100vh set and pushed behind with z-index: -1 so that it doesn't affect the layout.
See demo below:
* {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
display: grid;
margin: 0px;
grid-gap: 10px;
grid-template-columns: [side__nav] 250px [main] 1fr;
grid-template-rows: [header] 70px 1fr; /* removed footer from here */
grid-auto-rows: 70px; /* implicit grid height - footer height */
}
.header {
grid-column: main;
grid-row: 1;
background: pink;
}
.side__nav {
grid-column: side__nav;
grid-row: 1/span 3;
background: red;
}
.content {
grid-column: main;
grid-row: 2;
background: green;
}
.footer {
grid-column: main;
/*grid-row: 3;*/
background: purple;
opacity: 0.5;
}
.a {
grid-column: col/span 2;
grid-row: row;
}
.b {
grid-column: col 3/span 2;
grid-row: row;
}
.c {
grid-column: col/span 2;
grid-row: row 2;
}
.d {
grid-column: col 3/span 2;
grid-row: row 2;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
.e {
grid-column: 1/3;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 2;
}
.g {
grid-column: 2;
grid-row: 2;
}
.adjuster { /* grid items spanning two rows with explicit height set */
width: 0;
position: relative;
z-index: -1;
grid-column: 1;
grid-row: 1 / span 2;
height: 100vh;
}
section { /* new sections added*/
background: cadetblue;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
<!-- height adjuster for viewport -->
<span class="adjuster"></span>
<!-- other page sections below -->
<section></section>
<section></section>
Excerpts on implicit and explicit grids from MDN:
The implicit and explicit grid (MDN)
If you place something outside of the defined grid—or due to the
amount of content, more grid tracks are needed—then the grid creates
rows and columns in the implicit grid. These tracks will be auto-sized
by default, resulting in their size being based on the content that is
inside them.
You can also define a set size for tracks created in the implicit grid
with the grid-auto-rows and grid-auto-columns properties.
You can read more about Explicit and Implicit Grids here: CSS Grid unwanted column added automatically
This question already has answers here:
How to align content of a div to the bottom
(29 answers)
Align text to the bottom of a div
(2 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
I have made this CSS grid. I am still practising using the CSS grid, so I am trying to imitate this site. I would like to place the text the same place as the template I link to.
But how is the correct way to do this? At the moment the link is in the upper left corner.
Should I make another div inside the first div tag, or what is the best way to do it?
Best regards.
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/7;
height: 700px;
}
.item2 {
grid-row: 1 / 1;
grid-column: 7/13;
height: 340px;
}
.item3 {
grid-row: 2 / 3;
grid-column: 7/10;
height: 350px;
}
.item4 {
grid-row:2/3;
grid-column: 10/13;
height: 350px;
}
a {
font-size: 30px;
}
#media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 350px;
}
.item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
.item4 {
grid-row: 4 / 5;
grid-column: 7 / 13;
height: 200px;
}
}
/*
.nested {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:1em;
}
.nested > div {
border:1px solid red;
grid-auto-rows: 70px;
padding:1em;
}
*/
<div class="wrapper">
<div class="item1">
Watch a tiny cat taking a bath
</div>
<div class="item2">
Spain: Take a virtual tour
</div>
<div class="item3">
5 Tips to create your garden
</div>
<div class="item4">
10 Movies you need to see
</div>
</div>
Add this to the item
display: flex;
justify-content: flex-end;
flex-direction: column;
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/7;
height: 700px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.item2 {
grid-row: 1 / 1;
grid-column: 7/13;
height: 340px;
}
.item3 {
grid-row: 2 / 3;
grid-column: 7/10;
height: 350px;
}
.item4 {
grid-row:2/3;
grid-column: 10/13;
height: 350px;
}
a {
font-size: 30px;
}
#media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 350px;
}
.item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
.item4 {
grid-row: 4 / 5;
grid-column: 7 / 13;
height: 200px;
}
}
/*
.nested {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:1em;
}
.nested > div {
border:1px solid red;
grid-auto-rows: 70px;
padding:1em;
}
*/
<div class="wrapper">
<div class="item1">
Watch a tiny cat taking a bath
</div>
<div class="item2">
Spain: Take a virtual tour
</div>
<div class="item3">
5 Tips to create your garden
</div>
<div class="item4">
10 Movies you need to see
</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>
I'm trying to create a simple css grid using the native CSS Grid properties. It works as I wanted, except I want to create a utility class that can center a column in a grid.
Is there a way to create the __centered utility class, so that I can apply it to center columns? I know I could add empty column divs before the column, but I want a cleaner solution.
.l-wrap {
width: 100%;
max-width: 1196px;
margin: 0 auto;
}
.l-grid {
display: grid;
grid-gap: 52px;
grid-template-columns: repeat(6, 1fr);
background-color: orangered;
}
.l-grid--col {
grid-column: auto/span 6;
}
.l-grid--col-1 {
grid-column: auto/span 1;
background-color: lightblue;
}
.l-grid--col-2 {
grid-column: auto/span 2;
background-color: lightblue;
}
.l-grid--col-3 {
grid-column: auto/span 3;
background-color: lightblue;
}
.l-grid--col-4 {
grid-column: auto/span 4;
background-color: lightblue;
}
.l-grid--col-5 {
grid-column: auto/span 5;
background-color: lightblue;
}
.l-grid--col-6 {
grid-column: auto/span 6;
background-color: lightblue;
}
<div class="l-wrap">
<div class="l-grid l-grid__centered">
<div class="l-grid--col-2">
<p>This should span 2 and be centered.</p>
</div>
</div>
</div>
CSS Grid provides the justify-items and justify-self properties, which can be used for aligning grid items along the row-axis.
justify-items applies to the grid container. justify-self applies to grid items.
So your utility class can look something like this:
.l-grid__centered {
justify-self: center;
grid-column: 1 / -1;
}
This tells the grid item to center itself on the row in a grid area spanning from the first to last columns. (Negative integer values on grid-column and grid-row start the count from the end side.)
.l-wrap {
width: 100%;
max-width: 1196px;
margin: 0 auto;
}
.l-grid {
display: grid;
grid-gap: 52px;
grid-template-columns: repeat(6, 1fr);
background-color: orangered;
}
.l-grid--col {
grid-column: auto/span 6;
}
.l-grid--col-1 {
grid-column: auto/span 1;
background-color: lightblue;
}
.l-grid--col-2 {
grid-column: auto/span 2;
background-color: lightblue;
}
.l-grid--col-3 {
grid-column: auto/span 3;
background-color: lightblue;
}
.l-grid--col-4 {
grid-column: auto/span 4;
background-color: lightblue;
}
.l-grid--col-5 {
grid-column: auto/span 5;
background-color: lightblue;
}
.l-grid--col-6 {
grid-column: auto/span 6;
background-color: lightblue;
}
.l-grid__centered {
justify-self: center;
grid-column: 1 / -1;
}
<div class="l-wrap">
<div class="l-grid l-grid__centered">
<div class="l-grid--col-2">
<p>This should span 2 and be centered.</p>
</div>
</div>
</div>
jsFiddle demo
NOTE: The utility class is applied to the grid item, not the grid container. Also, this method breaks the 2-column grid area of the original content. The centered content will be able to expand across the entire row.
Alternatively, when working with a six-column grid, to horizontally center a two-column grid area, your utility class can look like this:
.__centered {
grid-column: 3 / span 2;
}
OR
.__centered {
grid-column: 3 / -3;
}
.l-wrap {
width: 100%;
max-width: 1196px;
margin: 0 auto;
}
.l-grid {
display: grid;
grid-gap: 52px;
grid-template-columns: repeat(6, 1fr);
background-color: orangered;
}
.l-grid--col {
grid-column: auto/span 6;
}
.l-grid--col-1 {
grid-column: auto/span 1;
background-color: lightblue;
}
.l-grid--col-2 {
grid-column: auto/span 2;
background-color: lightblue;
}
.l-grid--col-3 {
grid-column: auto/span 3;
background-color: lightblue;
}
.l-grid--col-4 {
grid-column: auto/span 4;
background-color: lightblue;
}
.l-grid--col-5 {
grid-column: auto/span 5;
background-color: lightblue;
}
.l-grid--col-6 {
grid-column: auto/span 6;
background-color: lightblue;
}
.l-grid__centered {
grid-column: 3 / span 2;
text-align: center;
}
<div class="l-wrap">
<div class="l-grid">
<div class="l-grid--col-2 l-grid__centered">
<p>This should span 2 and be centered.</p>
</div>
</div>
</div>
jsFiddle demo
NOTE: This solution only centers even-numbered grid areas.