I'm trying to create this layout
I have this aurelia template
And this CSS rules
#containerPlanner {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}
#cabecera {
display: flex;
grid-column: 1/4;
grid-row: 1;
grid-area: cabecera;
}
#resumen {
grid-column: 1;
grid-row: 2;
border: 2px solid black;
background-color: aqua;
grid-area: resumen;
}
#grafica {
grid-column: 2/4;
grid-row: 2;
border: 2px solid black;
background-color: yellow;
grid-area: grafica;
}
#opciones {
display: flex;
grid-column: 1/4;
grid-row: 3;
grid-area: opciones;
}
#datos {
grid-column: 1/4;
grid-row: 4;
grid-area: datos;
}
But the result is this
I don't understand why the resumen section occupies the entire width of the screen if it has grid-column:1.
And the same with grafica section
Any idea please?
Regards
Related
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>
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
I am using the grid rows and column. I am getting the issue at the last element. I need the second row with equal height and width. So I tried below code.
expected output is
I am getting the output
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/4;
grid-row: 1/3
}
.two {
grid-column: 4/6;
grid-row: 1/3;
}
.three {
grid-column: 1/3;
grid-row: 3/5
}
.four {
grid-column: 3/5;
grid-row: 3/5;
}
.five {
grid-column: 5/6;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
You used the number 5 which make it difficult to divide by 3. Use 15 for example and you can easily divide it by 3 and for the first row you will have 9 + 6 instead of 3 + 2
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(15, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/10;
grid-row: 1/3
}
.two {
grid-column: 10/16;
grid-row: 1/3;
}
.three {
grid-column: 1/6;
grid-row: 3/5
}
.four {
grid-column: 6/11;
grid-row: 3/5;
}
.five {
grid-column: 11/16;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
UPDATE
As per the OP comments, this is the correct output needed:
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/3;
grid-row: 1/3
}
.two {
grid-column: 3/4;
grid-row: 1/3;
}
.three {
grid-column: 1/2;
grid-row: 3/5
}
.four {
grid-column: 2/3;
grid-row: 3/5;
}
.five {
grid-column: 3/4;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
How can I prevent the footer row from overlapping the content row?
This is what I'm getting:
body {
display: grid;
grid-template-rows: 3.7rem auto auto;
grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
grid-row: 1;
grid-column: 2/4;
background-color: green;
height: 3rem;
}
*[role="main"] {
grid-row: 2;
grid-column: 2;
background-color: yellow;
height: 100px;
}
*[role="contentinfo"] {
grid-row: 3;
grid-column: 2/3;
border-top: 1px solid black;
}
*[role="contentinfo"] img {
height: 100px;
}
<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>
The footer (row 3) is overlapping the article (row 2) because you have a fixed height on the article:
[role="main"] { height: 100px; }
The overrides the auto height you have specified on the grid container with:
grid-template-rows: 3.7rem auto auto
Once you remove the height rule, the overlap is gone.
body {
display: grid;
grid-template-rows: 3.7rem auto auto;
grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
grid-row: 1;
grid-column: 2/4;
background-color: green;
height: 3rem;
}
*[role="main"] {
grid-row: 2;
grid-column: 2;
background-color: yellow;
/* height: 100px; <-------- REMOVE */
}
*[role="contentinfo"] {
grid-row: 3;
grid-column: 2/3;
border-top: 1px solid black;
}
*[role="contentinfo"] img {
height: 100px;
}
<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>
Is there any way that I can create a gallery like this
on bootstrap using an unordered list? I've accomplished that look with the column system but I really needed to use li items for this project.
So basically I want to create a list displayed as a grid. And it needs to be responsive as well. I want it turn into a one-column on mobile:
The reason why I want to use ul/li is because I'll be using wordpress and would like to use the wp_list_pages function.
This might be very easy but I just can't think of a solution that doesn't involve workarounds.
Thanks!
This is easier if use CSS Grids:
.gallary{
margin-top:50px;
width:80%;
height:100%;
display: grid;
grid-template-columns: 1fr 0.5fr 1fr;
grid-template-rows: 300px 200px;
}
.area1{
grid-column: 1/2;
grid-row: 1/2 ;
background-color: blue;
}
.area2{
grid-column: 2/4;
grid-row: 1/1;
background-color: yellow;
}
.area3{
grid-column: 1/2;
grid-row: 2/2;
background-color: green;
}
.area4{
grid-column: 2/3;
grid-row: 2/2;
background-color: orange;
}
.area5{
grid-column: 3/4;
grid-row: 2/2;
background-color: purple;
}
#media (max-width: 650px) {
.gallary{
margin-top:50px;
width:100%;
height:100%;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.area1{
grid-column: 1/-1;
grid-row: 1/2 ;
background-color: blue;
}
.area2{
grid-column: 1/-1;
grid-row: 2/3 ;
background-color: yellow;
}
.area3{
grid-column: 1/-1;
grid-row: 3/4 ;
background-color: green;
}
.area4{
grid-column: 1/-1;
grid-row: 4/5 ;
background-color: orange;
}
.area5{
grid-column: 1/-1;
grid-row: 5/6;
background-color: purple;
}
}
<div class="gallary">
<div class="area1">AAA</div>
<div class="area2">AAA</div>
<div class="area3">AAA</div>
<div class="area4">AAA</div>
<div class="area5">AAA</div>
</div>