I want to make a grid in footer where the text is above the grid but also staying in the grid. Position: absolute don't work because it effects both grid and text, and i want to move them independently of each other.
How it looks:
https://i.imgur.com/norbzp1.png
How i want it to be:
https://i.imgur.com/1fYoQIF.png
Code:
<div class="footer">Footer
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
And css:
.footer{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.icon{
display: flex;
background: rgb(160, 84, 84);
}
You can achieve this by wrapping the grid and the footer with a container.
.footer-header {
text-align: center;
padding:20px;
}
.footer-grid {
grid-column: span 3 / auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.icon{
display: flex;
background: rgb(160, 84, 84);
}
<div class="footer">
<div class="footer-header">
Footer
</div>
<div class="footer-grid">
<div class="icon">1</div>
<div class="icon">2</div>
<div class="icon">3</div>
<div class="icon">4</div>
<div class="icon">5</div>
<div class="icon">6</div>
</div>
</div>
Also you can use grid-template-areas, for example
.footer{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "footer-head footer-head footer-head";
grid-auto-rows: 50px;
grid-gap: 10px;
}
.icon{
display: flex;
background: rgb(160, 84, 84);
}
.footer-head {
text-align: center;
grid-area: footer-head;
}
<div class="footer">
<div class="footer-head">Footer</div>
<div id="icon1" class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
Related
I want to remove the worthless margin between rows, so I want every div takes the content height without giving margin to his side div, I tried everything but nothing works.
.grids {
width: 90%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(min-content, max-content);
margin: auto;
grid-gap: 32px;
}
.grid {
position: relative;
width: 95%;
height: max-content;
margin: 10px;
padding: 20px;
background: black;
border-radius: 10px;
}
<div class="grids">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</div>
Edit: To make a masonry layout I have wrapped grid items in div tag
so you can nest as many tags as you want.
grid items overflow the content because of the width and height properties.
you're using a grid gap for both rows and columns.
So I guess this might help you out.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
grid-gap: 10px;
}
.grid-item {
padding: 20px;
background: red;
border-radius: 10px;
margin-bottom: 24px;
}
<div class="grid">
<div>
<div class="grid-item">
<h1>Hello world</h1>
</div>
<div class="grid-item">
<h1>Hello world</h1>
</div>
</div>
<div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div>
<div class="grid-item">
<h1>Hello
<br>
friend
</h1>
</div>
<div class="grid-item"></div>
</div>
</div>
Also, I renamed the classes for naming purposes only.
MDN docs grid-row: row-gap
MDN docs masonry layout: masonry layout
You can try to set grid-gap: 32px to grid-gap: 0 32px, it will remove the margin between grid rows;
help me please, how do i get a result like this in the grid? the result i want - link - img https://ibb.co/XbW025V . here is my code https://jsfiddle.net/o0zjuyqb/1/
<div class="container">
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</div>
You can do this by using grid-column: span 2;
.grid {
display: grid;
grid-auto-flow: dense;
grid-template-columns: 250px 290px 290px 250px;
grid-template-rows: repeat(2, 280px);
gap: 40px;
}
.grid div {
background: grey;
}
.grid div.wide {
grid-column: span 2;
background: green;
}
<div class="grid">
<div class="wide"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="wide"></div>
</div>
So basically what i want to do is to have 9 Boxes in the middle of the screen.
This is what i tried:
main {
border: 4px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 100vw;
height: 100vh;
align-items: center;
justify-items: center;
}
.box1 {
background: red;
width: 50%;
}
.box2 {
background: blue;
width: 50%;
}
.box3 {
background: green;
width: 50%;
}
<main>
<div class="box1">
<h1>Box 1</h1>
</div>
<div class="box2">
<h1>Box 2</h1>
</div>
<div class="box3">
<h1>Box 3</h1>
</div>
<div class="box1">
<h1>Box 4</h1>
</div>
<div class="box2">
<h1>Box 5</h1>
</div>
<div class="box3">
<h1>Box 6</h1>
</div>
<div class="box1">
<h1>Box 7</h1>
</div>
<div class="box2">
<h1>Box 8</h1>
</div>
<div class="box3">
<h1>Box 9</h1>
</div>
</main>
This almost does what i want.
So what i get is this:
-b-b-b-
-b-b-b-
-b-b-b-
with - being free space.
What i want is this:
-bbb-
-bbb-
-bbb-
so that the 9 boxes actually touch each other.
Is there a way to do that?
(i want to hold on to the grid-template-columns: 1fr 1fr 1fr and grid-template-rows: 1fr 1fr 1fr)
tyvm :)
Is there a way to do that? (i want to hold on to the grid-template-columns: 1fr 1fr 1fr and grid-template-rows: 1fr 1fr 1fr)
No. There is no way to do this.
Because you've set your columns to 1fr each, they will spread across the width of the container in equal lengths. Therefore, the columns are not centered.
You would have to do something like this: grid-template-columns: 1fr auto auto auto 1fr, with the 1fr columns having no content and used solely for spacing. This set up would pin the three inner columns to the center.
How do I go from here
To here
I'm trying to center the inner div's to their parent except for the last row where I'd like to align it left to the row above it.
Here is the jsfiddle for the top image https://jsfiddle.net/L15p2nev
.container {
text-align: center;
background-color: green;
}
.item {
display: inline-block;
width: 300px;
background-color: red;
}
<div class="container">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
</div>
Using grid display layout, this can be archived.
You can set grid-template-columns: repeat(auto-fit, 300px) to align items as the image.
.container {
background-color: green;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.item {
display: inline-block;
background-color: red;
}
<div class="container">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
</div>
I'm trying to create a 2 x 2 image tile using css grid. I'm want to make this dynamic so that no matter how many images are provided (between 1 and 4), the full space of the tile is used. So like this:
Ive got this kinda working with the following css and markup.
CSS
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, 38px);
grid-column-gap: 4px;
grid-row-gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: 2 span / 2 span;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: 2 span;
}
HTML
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
But in some cases there needs to be text in a tile. When that happens the grid doesn't follow the sizing of the other instances:
I need the grid to be consistent. Anyone able to offer some help on how to ensure this / improvements to the grid properties? Thanks!
I've a Codepen of the current working.
Force all the columns/rows to be equal in size by using
grid-template-columns: 1fr 1fr; /* two equal columns */
grid-auto-rows: 1fr; /* all the rows equal */
Full code
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: span 2 / span 2;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: span 2;
}
<div class="container">
<div class="grid-tiles">
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile">Zaa</div>
</div>
</div>