I'm coding a personal website with a photo galery. I'd like it responsive but it doesn't work as I'd like. An example would be in this website (https://tiffany-tourn.fr/).
Here is my html:
<section id="galerie">
<div class="container-fluid">
<h3>Galerie photos</h3>
<div class="container">
<div class="myGalery">
<img class="gallery_item_1" src="images/fondecran.jpg">
<img class="img-fluid gallery_item_2" src="images/modele.jpg">
<img class="img-fluid gallery_item_3" src="images/Photo4.jpg">
<img class="img-fluid gallery_item_4" src="images/Photo6.jpg">
<img class="img-fluid gallery_item_5" src="images/photo7.jpg">
<img class="img-fluid gallery_item_6" src="images/photo1.jpg">
<img class="img-fluid gallery_item_7" src="images/photo9.jpg">
<img class="img-fluid gallery_item_8" src="images/photo10.jpg">
<img class="img-fluid gallery_item_9" src="images/photo11.jpg">
<img class="img-fluid gallery_item_10" src="images/photo12.jpg">
</div>
</div>
</div>
</section>
and here is the css
#galerie .container {
max-width: 800px;
width: 90vw;
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
grid-auto-rows: 150px;
justify-content: center;
align-content: center;
grid-auto-flow: dense;
}
#galerie .container .myGalery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 5vw);
grid-gap: 2px;
}
#galerie img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery_item_1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
}
.gallery_item_2 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.gallery_item_3 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 4;
}
.gallery_item_7 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 8;
}
.gallery_item_8 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
}
.gallery_item_9 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
}
.gallery_item_10 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 8;
}
I feel I'm not too far from it but it seems it lacks something!!! I'd like to have four columns for big screens and as the screen becomes smaller, I'd like 3 columns, 2 and then 1. I found the css property column-count but don't know how to properly implement it in my code.
Thanks for your help
Try using #media:
#media screen and (max-width: 900px) {
your_class_or_id {
column-count: 3;
}
}
#media screen and (max-width: 600px) {
your_class_or_id {
column-count: 2;
}
}
#media screen and (max-width: 400px) {
your_class_or_id {
column-count: 1;
}
}
max-width: ...px - set how you need
For those who would like a responsive photo gallery, I found this CSS code that works for me
#id or .class {
line-height: 0;
-webkit-column-count: 4;
-webkit-column-gap: 3px;
-moz-column-count: 4;
-moz-column-gap: 3px;
column-count: 4;
column-gap: 3px;
}
#id or .class img {
width: 100%;
height: auto
}
and then simply add your media queries:
#media (max-width: 1200px) {
#id or .class {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
#media (max-width: 1000px) {
#id or .class {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
#media (max-width: 800px) {
#id or .class {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
#media (max-width: 450px) {
#id or .class {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
Thanks for your help anyway ;)
Related
In a grid container with 1 column and 1 row, If I have an implicit column on the 1st row, how do I get an element in the second row (the green column in the example) to span both the explicit and implicit columns? Thanks in advance
*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
grid-auto-columns: auto;
}
button {
background-color: red;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end: 3;
}
header {
background-color: blue;
grid-row-start: 1;
}
p {
background-color: green;
grid-column-start: 1;
grid-column-end: -1;
width: 100%;
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
grid-auto-columns: auto;
}
button {
background-color: red;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end: 3;
}
header {
background-color: blue;
grid-row-start: 1;
}
p {
background-color: green;
grid-column-start: 1;
grid-column-end: 3; /*This is what changed*/
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
Since the implicit column is an auto one, you can make explicit and simplify your code like below
* {
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 2fr;
color: white;
}
button {
background-color: red;
}
header {
background-color: blue;
}
p {
background-color: green;
grid-column: 1/-1;
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
<div class="grid">
<header>title</header>
<p>paragraph</p>
</div>
So I'm trying to create the below image with CSS grid. min-content and auto doesn't seem to be playing nice. Here is a fiddle! https://jsfiddle.net/pw9L52h0/
HTML:
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
CSS:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
grid-row-start: 0;
grid-row-end: 1;
grid-column-start: 0;
grid-column-end: 1;
background-color: red;
}
.label-2 {
grid-row-start: 0;
grid-row-end: 1;
grid-column-start: 1;
grid-column-end: 3;
background-color: green;
}
.label-3 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 0;
grid-column-end: 1;
background-color: blue;
}
.label-4 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background-color: yellow;
}
.label-5 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
background-color: orange;
}
.label-6 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
background-color: pink;
}
.label-7 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
background-color: purple;
}
It ends up like this:
You are overcomplicating this where you only need few line of code like below:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
background-color: red;
}
.label-2 {
grid-column:span 2; /* this */
background-color: green;
}
.label-3 {
grid-row:span 2; /* and this */
background-color: blue;
}
.label-4 {
background-color: yellow;
}
.label-5 {
background-color: orange;
}
.label-6 {
background-color: pink;
}
.label-7 {
background-color: purple;
}
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
The main issue with your code is that you are counting from 0 where you need to start from 1. 3 columns means 4 lines (1,2,3,4).
You can clearly see in the console that grid-start-* = 0 is invalid and grid-end-* = 1 will place the end of the element at the first line creating an implicit new column/row at the beginning thus you will end having 4 columns/rows:
Here is your code fixed with the correct numbers:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background-color: red;
}
.label-2 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 4;
background-color: green;
}
.label-3 {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 2;
background-color: blue;
}
.label-4 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
background-color: yellow;
}
.label-5 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
background-color: orange;
}
.label-6 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
background-color: pink;
}
.label-7 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
background-color: purple;
}
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
I'm trying to create a fairly simple 12 column CSS Grid framework and allow the nesting of grids.
.grid {
grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
column-gap: 2rem;
}
I'm currently having an issue where the fractional columns are being pushed out of the nested grid container when increasing the gutter width, no matter what content is in it.
I've tried setting the minmax value to 0 when declaring the columns but it still insists on expanding. I know this is because the width of the gutters adds up to more than the content, but is there a way to force it down without using the overflow property?
Columns are being pushed by the gutter and/or content:
...when columns should accommodate gutter instead:
Codepen
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: [left-gutter-start] auto [left-gutter-end] minmax(0, 960px) [main-content-end] auto [right-gutter-end];
overflow-wrap: break-word;
}
.container>.grid {
grid-column-start: left-gutter-end;
grid-column-end: main-content-end;
}
.container>.grid.grid-breakout {
grid-column-start: left-gutter-start;
grid-column-end: right-gutter-end;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
-webkit-column-gap: 2rem;
column-gap: 2rem;
grid-column-end: span 12;
}
.grid .grid {
-webkit-column-gap: 2rem;
column-gap: 2rem;
}
.grid .col-1 {
grid-column-end: span 1;
}
.grid .col-2 {
grid-column-end: span 2;
}
.grid .col-3 {
grid-column-end: span 3;
}
.grid .col-4 {
grid-column-end: span 4;
}
.grid .col-5 {
grid-column-end: span 5;
}
.grid .col-6 {
grid-column-end: span 6;
}
.grid .col-7 {
grid-column-end: span 7;
}
.grid .col-8 {
grid-column-end: span 8;
}
.grid .col-9 {
grid-column-end: span 9;
}
.grid .col-10 {
grid-column-end: span 10;
}
.grid .col-11 {
grid-column-end: span 11;
}
.grid .col-12 {
grid-column-end: span 12;
}
.grid .col-end {
grid-column-end: -1;
}
.grid .colstart-start {
grid-column-start: 1;
}
.grid .colstart-2 {
grid-column-start: 3;
}
.grid .colstart-3 {
grid-column-start: 4;
}
.grid .colstart-4 {
grid-column-start: 5;
}
.grid .colstart-5 {
grid-column-start: 6;
}
.grid .colstart-6 {
grid-column-start: 7;
}
.grid .colstart-7 {
grid-column-start: 8;
}
.grid .colstart-8 {
grid-column-start: 9;
}
.grid .colstart-9 {
grid-column-start: 10;
}
.grid .colstart-10 {
grid-column-start: 11;
}
div[class*="col-"] {
text-align: left;
background-color: orange;
font-size: 12px;
font-family: sans-serif;
}
div[class*="col-"]:before {
content: attr(class);
display: inline-block;
margin: 4px;
}
.container[class*="col-"]:before {
display: none;
}
div[class*="col-"] div[class*="col-"] {
background: lightgreen;
}
div[class*="col-"] div[class*="col-"]:after {
content: " (nested)";
display: inline-block;
margin: 4px;
}
.grid {
row-gap: 1rem;
}
.grid .grid {
background: green;
}
.grid-breakout {
background: red;
}
.container {
-webkit-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
margin-bottom: 1rem;
}
<div class="container">
<div class="grid">
<div class="col-4"></div>
<div class="col-4">
<div class="grid">
<div class="col-12"></div>
<div class="col-3"></div>
<div class="col-9"></div>
<div class="col-2"></div>
<div class="col-10"></div>
<div class="col-1"></div>
<div class="col-11"></div>
</div>
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<div class="grid">
<div class="col-6">
<p>This is what I would want to happen...</p>
<div class="grid">
<div class="col-12"></div>
<div class="col-3"></div>
<div class="col-9"></div>
<div class="col-2"></div>
<div class="col-10"></div>
<div class="col-1"></div>
<div class="col-11"></div>
</div>
</div>
<div class="col-6">
<div class="grid">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
</div>
</div>
</div>
Short answer.
Bear in mind, that for any given grid, you should never have gaps that multiplied by the columns will have bigger size than the container grid even when the columns has no content.
In other words: gap * columns(0width) < gridWidth otherwise, it will overflow.
Try to reduce the gap for inner grids from 2rem to 1rem for instance and your example will work
.main {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(12, 1fr);
margin: 0 auto;
width: 100%;
max-width: 1280px;
}
.one, .two, .three, .four, .five, .six,
.seven, .eight, .nine, .ten, .eleven, .twelve {
grid-column-end: span 12;
}
.nested {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(12, 1fr);
}
.merge-two-rows { grid-row-end: span 2 }
.merge-three-rows { grid-row-end: span 3 }
.merge-four-rows { grid-row-end: span 4 }
.merge-five-rows { grid-row-end: span 5 }
.merge-six-rows { grid-row-end: span 6 }
#media only screen and (min-width: 481px) {
.one { grid-column-end: span 1 }
.two { grid-column-end: span 2 }
.three { grid-column-end: span 3 }
.four { grid-column-end: span 4 }
.five { grid-column-end: span 5 }
.six { grid-column-end: span 6 }
.seven { grid-column-end: span 7 }
.eight { grid-column-end: span 8 }
.nine { grid-column-end: span 9 }
.ten { grid-column-end: span 10 }
.eleven { grid-column-end: span 11 }
}
Resource: Smart 12 Column Grid with Nesting
I have this simple grid:
body { margin: 0; }
.grid {
-ms-grid-columns: 200px auto;
-ms-grid-rows: 54px 53px auto;
display: grid;
height: 100vh;
grid-template-areas:
"header header"
"navbar navbar"
"sidebar content";
grid-template-columns: 200px auto;
grid-template-rows: 54px 53px auto;
}
.header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
background-color: orange;
}
.navbar {
grid-area: navbar;
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 2;
background-color: lightgreen;
}
.sidebar {
grid-area: sidebar;
-ms-grid-column: 1;
-ms-grid-row: 3;
background-color: #eee;
}
.content {
grid-area: content;
-ms-grid-column: 2;
-ms-grid-row: 3;
background-color: yellow;
}
<div class="grid">
<div class="header">header</div>
<div class="navbar">navbar</div>
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
I have tried to add the old Microsoft-specific CSS -ms-grid-prefixed grid properties accordingly so it is supposed to work in IE 11 as well. What I get instead is this:
Here's the IE11-debug codepen: https://s.codepen.io/connexo/debug/BaBLpbx/yYryLJBqwdPM
Here's the full codepen for other browsers: https://codepen.io/connexo/pen/BaBLpbx
Does anyone see what I'm missing to make this simple grid work in IE 11?
Okay, I was able to solve the problem.
display: -ms-grid; was missing on the grid-container. Props go to #Michael_B for spotting this crucial mistake.
By the looks of it auto for column/row-definitions seems to be unsupported/interpreted differently on IE 11. I simply replaced it with 1fr.
body { margin: 0; }
.grid {
-ms-grid-columns: 200px 1fr;
-ms-grid-rows: 54px 53px 1fr;
display: grid;
display: -ms-grid;
height: 100vh;
grid-template-areas:
"header header"
"navbar navbar"
"sidebar content";
grid-template-columns: 200px auto;
grid-template-rows: 54px 53px auto;
}
.header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
background-color: orange;
}
.navbar {
grid-area: navbar;
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 2;
background-color: lightgreen;
}
.sidebar {
grid-area: sidebar;
-ms-grid-column: 1;
-ms-grid-row: 3;
background-color: #eee;
}
.content {
grid-area: content;
-ms-grid-column: 2;
-ms-grid-row: 3;
background-color: yellow;
}
<div class="grid">
<div class="header">header</div>
<div class="navbar">navbar</div>
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
Your IE is probably using a lower version to render your page you can check it in IE Dev Tools.
To solve it try adding this meta tag in your HTML page
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
I am using CSS Grid layout to have a 3 column layout. Even though I have mentioned the list1 to span across 3 rows, the list1 is only spanning one row.
.wrapper {
max-width: 940px;
margin: 0 auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
.wrapper>div {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
padding: 1em;
color: #5a2916;
}
.item1 {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 4;
-ms-grid-row: 1;
grid-row-start: 1;
grid-row-end: 3;
}
.item2 {
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-row: 3;
grid-row-start: 3;
grid-row-end: 5;
}
<div class="wrapper">
<div class="item1">One</div>
<div class="item2">Two</div>
<div class="item3">Three</div>
<div class="item4">Four</div>
<div class="item5">Five</div>
</div>
Please let me know where I am going wrong.
Add a grid-auto-rows property to your grid. Like:
grid-auto-rows: 50px;
.wrapper {
max-width: 940px;
margin: 0 auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
}
.wrapper>div {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
padding: 1em;
color: #5a2916;
}
.item1 {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 4;
-ms-grid-row: 1;
grid-row-start: 1;
grid-row-end: 3;
}
.item2 {
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-row: 3;
grid-row-start: 3;
grid-row-end: 5;
}
<div class="wrapper">
<div class="item1">One</div>
<div class="item2">Two</div>
<div class="item3">Three</div>
<div class="item4">Four</div>
<div class="item5">Five</div>
</div>
I think you ought to add in wrapper class definition how many rows you want your wrapper to span.
When I added this grid-template-rows: repeat(5, 1fr); item1 went from one to three rows.