Iam working on a simple layout. It works on edge and co, but in IE11 it places anything in the first row.
<body>
<div class="sidebar1">
<nav>
<ul>
</ul>
</nav>
</div>
<article class="content">
</article>
</body>
body {
display: -ms-grid;
display: grid;
-ms-grid-columns: 250px 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 250px 1fr;
}
.sidebar1 {
-ms-grid-row:1;
-ms-grid-column:1;
}
.content {
-ms-grid-row:1;
-ms-grid-column:2;
}
Greetings
Ron
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;
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>
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.
Lets suppose I have parent container with fixed height:
.container {
max-height: 100px;
}
This container contains a grid, which has to be take the whole height, and if cell's content doesn't fit, it has to be scrollable.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
But if content of grid's cells is too big vertically, the grid is blowout the parent container, and I have no idea how to fix it.
minmax doesn't work for me in this case.
Example code:
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1 / span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
You may add max-height: inherit; to the .grid so it can inherit the max height to make the overflow works properly.
Ultimately you want to restrict height of the .grid instead of the container, since it's the children of the .grid needs to be scrollable, not .container.
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
/* added */
max-height: inherit;
}
.grid > * {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1/span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
Simply make the parent a flexbox container
.container {
display:flex;
max-height: 100px;
border: 1px solid red;
}
.grid {
width:100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.left {
grid-column: 1;
grid-row: 1 / span 2;
}
.right-top {
grid-column: 2;
grid-row: 1;
}
.right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
I'm trying to create a simple 7x7 grid. The problem is when I place a <ul> into the grid cell, it has a large padding after it which I don't know how to remove.
My question is, how to remove that gap?
.date-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
width: 90vw;
height: 90vh;
}
.date-grid .cell {
padding: 2px;
border: 1px solid #E0E0E0;
}
<div id="grid" class="date-grid">
<div id="cell00" class="cell">
<div id="cell00content" style="margin-bottom: 0">
<div>
<ul>
<li>elso</li>
<li>masodik</li>
<li>harom</li>
<li>negy</li>
<li>ot</li>
</ul>
</div>
</div>
</div>
Entire page:
In your CSS let the height get an auto height with the content
.date-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
width: 90vw;
/*height: 90vh;*/ /*with this line you give a fixed height*/
}
.date-grid .cell {
padding: 2px;
border: 1px solid #E0E0E0;
}
<div id="grid" class="date-grid">
<div id="cell00" class="cell">
<div id="cell00content" style="margin-bottom: 0">
<div>
<ul>
<li>elso</li>
<li>masodik</li>
<li>harom</li>
<li>negy</li>
<li>ot</li>
</ul>
</div>
</div>
</div>