I must create a gallery, I have a various amount of photo and I would like to have always adjusted pictures. How can I do this with CSS grid?
In screen I show you my example - I have 4 photos I would like to have mixed sizes and at the same time - have alignment.
The problem is: I can't use simply css grid and arrange it properly, because I have also various amount of photo. So in one case, I have 4 photos, and another eg 15, and those photos always must be alignment. How can I do this? Maybe some library?
...
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3,100px);
height: 500px;
width: 500px;
grid-gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
align-content: space-between;
justify-content: space-around;
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}
<div class="wrapper">
<div class="item1">Objet 1</div>
<div class="item2">Objet 2</div>
<div class="item3">Objet 3</div>
<div class="item4">Objet 4</div>
</div>
Related
I am trying to Auto-Sizing Columns in CSS Grid. Like if I have one child-div it will cover full space in mother-div. But if there are multiple child-div it will allow specific number of child-div in a row . Here I am using CSS grid. But I cant do it. Here is my code
<div class="mother-div">
<div class="child-div>
</div>
<div class="child-div>
</div>
</div>
css
.child-div {
background-color: #257790;
height: 100px;
width: 100%;
}
.mother-div {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 1em;
}
What you are looking is almost automatic, grid will behave like this almost out of the box.
You only need to set grid-auto-flow to the direction that you want
To limit the number of items per row, you need to set them to a specific column, using nth-child selector
this style:
.child-div:nth-child(5n+1) {
grid-column: 1;
}
selects childs for n values 0, 1, 2, and so on, that in the formula 5n+1 gives values 1, 6, 11, 16, ...
All those children will go to column 1, that matches the requirement for 5 elements per row.
.child-div {
background-color: #257790;
height: 50px;
width: 100%;
}
.child-div:nth-child(5n+1) {
grid-column: 1;
}
.child-div:nth-child(5n+2) {
grid-column: 2;
}
.child-div:nth-child(5n+3) {
grid-column: 3;
}
.child-div:nth-child(5n+4) {
grid-column: 4;
}
.child-div:nth-child(5n) {
grid-column: 5;
}
.mother-div {
margin: 10px;
width: 500px;
border: solid 3px black;
display: grid;
grid-gap: 1em;
grid-auto-flow: column;
}
<div class="mother-div">
<div class="child-div">
</div>
</div>
<div class="mother-div">
<div class="child-div">
</div>
<div class="child-div">
</div>
</div>
<div class="mother-div">
<div class="child-div">1
</div>
<div class="child-div">2
</div>
<div class="child-div">3
</div>
<div class="child-div">4
</div>
<div class="child-div">5
</div>
<div class="child-div">6
</div>
</div>
I'm trying to align a logo and navigation bar in one row across the top of a website using CSS grid.
I've written out the code but can't work out what I'm doing wrong as to why it's not working: https://codepen.io/chloewb/pen/wRRewQ
.logo{
grid-area: logo;
background:white;}
.navi{
grid-area: navi;
background:Yellow;}
.section1{
grid-area: features;
background:LightSalmon;}
.section2{
grid-area: technology;
background:PaleTurquoise;}
.section3{
grid-area: pricing;
background:LightPink;}
.section4{
grid-area: email;
background:PaleGreen;}
.container {
display: grid;
grid-template-rows: repeat (5, auto);
grid-template-columns: 1fr 1fr 1fr;
font-size: 40px;
width: 100%;
background: grey;
grid-template-areas:
"logo navi navi"
"features features features"
"technology technology technology"
"pricing pricing pricing"
"email email email";}
The first thing to notice is that, when you use display: grid on a container element, its direct children will become grid-items, and to these items is that the grid layout you build will apply.
So let's say we have the following:
<div class="container">
<div class="child-1">
<div class="child-2"></div>
<div class="child-2"></div>
</div>
<div class="child-1"></div>
<div class="child-1"></div>
<div class="child-1"></div>
</div>
And this CSS:
.container{
display: grid;
}
Then only the child-1 will become grid items and be able to get properties like grid-area applied to them; everything else inside .child-1, like .child-2 will behave normally, as if there's no Grid. Unless you also specify the .child-1 element to be a grid with display: grid.
In your case, you header element is a direct child of the .container element, so it is a grid item and can be positioned on any place on the grid, but the logo and navi elements are children of header, so the grid layout does not apply to them. You would either have to take them out of the header so the rules you wrote take effect, or create another grid in the header and let it use the full first row. See this example and notice how the nesting of the elements affect them.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(50px, auto);
grid-template-areas: "logo navi navi";
margin-bottom: 20px;
border: 1px solid black;
}
.logo {
border: 1px solid red;
grid-area: logo;
}
.navi {
border: 1px solid blue;
grid-area: navi;
}
<div class="container">
<div class="logo">Logo</div>
<div class="navi">Nav</div>
</div>
<div class="container">
<header>
<div class="logo">Logo</div>
<div class="navi">Nav</div>
</header>
</div>
I have a design where the entire page has a 3x3 column layout, however, one area of the page goes from 3 columns to 2, by just having negative space where every 3rd column used to be, like so:
Even when you add more div elements, like so:
I'm thinking the way to achieve this is using css grid with grid-areas, however, when uncommenting the two lines below this doesn't seem to work:
.inner {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
// grid-template-areas: "c c .";
> div {
// grid-area: c;
}
}
Am I going the right way about this or would using Flexbox be more appropriate?
Link to a Codepen
You can consider an empty element that will take the third column/first row and you will have the needed result:
.inner {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.inner div {
background:red;
height:100px;
}
.inner:after {
content:"";
grid-row:1;
grid-column:3;
}
<div class='container'>
<h2>Title</h2>
<div class='inner'>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
</div>
</div>
UPDATE
with more element you can try this:
.inner {
display: grid;
grid-column-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.inner div {
background:red;
height:100px;
margin-bottom:2rem; /*to replace row gap*/
}
.inner:after {
content:"";
grid-row:1 / span 50; /*take all the third column*/
grid-column:3;
}
<div class='container'>
<h2>Title</h2>
<div class='inner'>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
</div>
</div>
This might not be a recommended question to ask as i am not supplying code examples, but i am trying to replicate the design in the image below. I am looking for somewhere with an example of the layout so i can copy the HTML and CSS straight from it (4 boxes aligned with 1 big box) can anyone point me in the right direction or what technology i can look at? I have looked at css-grid but i am struggling to find a similar example of what i am looking for?
Thanks!
Try using Bootstrap. This layout will be very easy to develop using Bootstrap's two column layout.
CSS Grid should be able to do the trick. Quick whip up below, you can obviously adjust the column and row gaps as well as add the 100% row at the bottom for the red button in your example... this should be a good starting point for you though.
HTML:
<div class="container">
<div class="Header">
<div class="TopHeader" style="background-color:red;">
</div>
<div class="BottomHeader" style="background-color:blue;">
</div>
</div>
<div class="LeftCol" ">
<div class="Square1 " style="background-color:orange; "></div>
<div class="Square2 " style="background-color:green; "></div>
<div class="Square3 " style="background-color:orange; "></div>
<div class="Square4 " style="background-color:green; "></div>
</div>
<div class="RightCol " style="background-color:yellow; ">
</div>
</div>
CSS:
.TopHeader {
grid-area: topheader;
}
.BottomHeader {
grid-area: bottomheader;
}
.Square1 {
grid-area: square1;
}
.Square2 {
grid-area: square2;
}
.Square3 {
grid-area: square3;
}
.Square4 {
grid-area: square4;
}
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 250px 800px;
align-content: space-around;
grid-template-areas: "header header" "leftcol rightcol";
}
.Header {
grid-area: header;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
align-content: space-around;
grid-template-areas: "topheader" "bottomheader";
}
.LeftCol {
grid-area: leftcol;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 25% 25% 25% 25%;
grid-template-areas: "square1" "square2" "square3" "square4";
}
.RightCol {
grid-area: rightcol;
}
I know there are similar questions but this is specifically asking how to do this using CSS Grid Layout.
So we have this basic grid setup:
HTML (with sidebar):
<div class="grid">
<div class="content">
<p>content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
CSS:
.grid {
display: grid;
grid-template-columns: 1fr 200px;
}
To create a layout that looks something like this:
| content | sidebar |
If the page doesn't have a sidebar though, ie. the html looks like this but with the same CSS:
HTML (no sidebar):
<div class="grid">
<div class="content">
<p>content</p>
</div>
</div>
The page layout looks like this (dashes represent empty space)
| content | ------- |
I know why it does that, the grid column is still defined in the grid-template-columns rule.
I'm just wondering how to tell the grid that if there is no content, then fill the remaining space similar to how flex-grow works for flexbox.
The desired result would look like this if no sidebar is present.
| content |
Don't define the columns explicitly with grid-template-columns.
Make the columns implicit instead and then use grid-auto-columns to define their widths.
This will allow the first column (.content) to consume all space in the row when the second column (.sidebar) doesn't exist.
.grid {
display: grid;
grid-auto-columns: 1fr 200px;
}
.content {
grid-column: 1;
}
.sidebar {
grid-column: 2;
}
.grid > * {
border: 1px dashed red; /* demo only */
}
<p>With side bar:</p>
<div class="grid">
<div class="content">
<p>content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
<p>No side bar:</p>
<div class="grid">
<div class="content">
<p>content</p>
</div>
</div>
You can get closer by using content sizing keywords, something like:
.grid {
display: grid;
grid-template-columns: 1fr fit-content(200px);
}
.sidebar {
width: 100%;
}
The fit-content keyword will look at the size of the content and act like max-content until it gets to the value you pass in.
In reality you probably wouldn't need to stick a size on sidebar as the content is likely to dictate a size of at least 200 pixels (for example) but you can play around with this.
I think I know the definitive answer to this question now. The problem with the answers so far is that they don't explain how to handle a sidebar that is on the left side of the main content (mainly because I didn't ask for it in the original question).
<div class="grid">
<nav>
<p>navigation</p>
</nav>
<main>
<p>content</p>
</main>
<aside>
<p>sidebar</p>
</aside>
</div>
You can use this CSS:
.grid {
display: grid;
grid-template-columns: fit-content(200px) 1fr fit-content(200px);
}
nav, aside {
width: 100%;
}
/* ensures that the content will always be placed in the correct column */
nav { grid-column: 1; }
main { grid-column: 2; }
aside { grid-column: 3; }
This is also a good use case for grid-areas
.grid {
display: grid;
grid-template-columns: fit-content(200px) 1fr fit-content(200px);
grid-template-areas: "nav content sidebar";
}
nav, aside {
width: 100%;
}
/* ensures that the content will always be placed in the correct column */
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: sidebar; }
An IE compatible version would look like this:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto;
}
nav, aside {
width: 100%; /* Ensures that if the content exists, it takes up max-width */
max-width: 200px; /* Prevents the content exceeding 200px in width */
}
/* ensures that the content will always be placed in the correct column */
nav {
-ms-grid-column: 1;
grid-column: 1;
}
main {
-ms-grid-column: 2;
grid-column: 2;
}
aside {
-ms-grid-column: 3;
grid-column: 3;
}