I'm trying to use CSS Grid in IE11. From what I've heard, it is posible. What I am trying to do is something like this:
Example on CodePen
My HTML is simple:
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
The CSS is
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.col {
margin: 0;
padding: 0;
height: 100px;
background: #ddd;
}
When I load the page in chrome, it's fine (see image above). Alas, here's how it looks in IE11.
Even though I've added in the relevant MS prefixes, it still seems like the boxes are stacked on top of each other.
Anyone know what I'm missing here?
Related
I am new on css. I am trying to built a calculator. What I am trying to do is that
when I click a button on the calculator, a menu (sin, cos, tan, cot) must show up. I have no idea if it is possible. I searched it but I am having hard time to find it. Can you help ? I explained below in detail.
Here is some of html...
<div class="calculator">
<div class="screen">536,125</div>
<div class="above-numbers">
<div>√</div>
<div>Π</div>
<div>^</div>
<div>!</div>
<div class="show-more">V</div> // When I hover over this div, page must render the div below but
it should not render it if I am not hovering over it
<div class="tr-menu">
<div>sin</div>
<div>cos</div>
<div>tan</div>
<div>cot</div>
<div>cosec</div>
<div>sec</div>
</div>
</div>
I am triyng to control class="tr-menu" div from class="show-more" div.
Here is some of my css
.above-numbers{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
cursor: pointer;
justify-content: space-between;
}
.above-numbers div{
border: none;
color: white;
background-color: #282a2d;
cursor: pointer;
}
.show-more{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.show-more:hover{
height: 100px;
}
when I hover over 'V' a menu must show up and that menu must contain sin cos tan ....
I managed to get hover working by changing css for this :
.tr-menu{
display:none;
}
.show-more:hover + div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100px;
}
It should get you started. See here for example : https://www.geeksforgeeks.org/display-div-element-on-hovering-over-a-tag-using-css/
Oh, and maybe you should update your title for something more specific since you were looking for a CSS hover.
I have a basic header that has a max-width and margin applied (standard stuff) in order to position it horizontally in the middle of the page.
However, when I run a lighthouse report, it shows a horizontal shift.
Below is my HTML, CSS and the screenshot of the shift.
I would appreciate it if anyone else experienced this problem before and know how to combat this horizontal shifting. Thanks.
Screenshot:
HTML:
<header class="header" role="banner" itemscope="" itemtype="http://schema.org/WPHeader">
<div class="header__container">
<div class="header__search">
<form class="header-search">
<input type="text" placeholder="" class="header-search__input" >
<button type="submit" class="header-search__button" name="Search" aria-label="Search">
<i class="fa fas--search"></i>
</button>
</form>
</div>
</div>
</header>
CSS:
.header {
width: 100%;
background: #321428;
}
.header__container {
padding: 10px;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
grid-gap: 10px;
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
#media (min-width: 768px) {
.header__container {
-ms-grid-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto;
-ms-grid-rows: auto 40px;
grid-template-rows: auto 40px;
grid-gap: 20px;
}
}
#media (min-width: 960px) {
.header__container {
-ms-grid-columns: 21.6% 1fr 25.7%;
grid-template-columns: 21.6% 1fr 25.7%;
padding: 10px 20px 15px;
height: 115px;
}
}
I found the answer to my own question.
The horizontal shift happens because the page is still rendering the remaining parts of the page which is below the fold, causing the scroll bar to appear later on.
To combat this situation, I simply added html { overflow-y: scroll; } to enforce the scrollbar at first paint. Since then, my lighthouse report came back with no major CLS issues.
I have a grid below with css.
In second row, The Document Date is Too close to Document Number. I tried changing 1fr to 3fr, didn't work.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
I was going to add the following with margin-left. Just curious if there isa more professional with css grid, to separate the column spacing.
.second-column {
margin-left:5px;
}
You can use:
grid-gap
grid-row-gap
grid-column-gap
to add spacing to the grid
For example
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3em;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
Note that grid-row-gap and grid-column-gap are being phased out for row-gap and column-gap respectively.
Just add column-gap: 2rem; in rem or px as you want.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem; /* added */
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
I want to create a 2 column, 3 row image square image gallery.
For some reason when writing code, the height of the boxes are Not filling up grid. How do I make the height of images become square with width?
Code , CSS and HTML below. Images should be touching edge to edge and would like to refrain from naming Pixel size if possible. Isn't there a stretch property or something? Trying to get that to work,
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding: 0px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
If you want to fill up the box height. You should use align-items "stretch" property to the grid container.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);.
grid-template-columns: repeat(3, 1fr);
grid-gap: 0;
padding: 0px;
align-items: stretch;
}
Demo Code
This is your solution and when you resize your window then images will automatically resize.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
padding: 0px;
align-items: stretch; /* Default. Items are stretched to fit the container */
}
img {
width: 100%;
height:auto;
padding: 0px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
This is your source link your source code
Try Following code.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
img {
width: 100%;
height: 140px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
Also make sure to use same size images in case you want to use height:auto
I've been playing around with CSS Grid recently and have noticed something that I can't see to find the answer to. Let's say I split my page out to have 2 columns, and then a row below it, with another column (which spans both columns). On mobile, I'd like them to stack one on top of the other and then go back to layout described above after a certain breakpoint. Here is the markup:
HTML
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>
SCSS
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background-color:grey;
grid-gap:10px;
#media only screen and (max-width:800px) {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.lower {
grid-template-columns: 1fr;
grid-template-rows:auto;
background-color: green;
grid-gap:10px;
}
I've noticed that on mobile, even though I've defined grid-gap for both of my grid sections, on mobile when the columns stack, the grid-gap is not maintained. So in the fiddle below, when you make the window smaller, you can see that when the columns, stack one on top of the other, the gap between B and C is non existent. Here is the fiddle:
Fiddle
Hope I'm making sense!
EDIT: Bear in mind I'm only testing this in Firefox and Chrome (which support grid).
The grid-gap rule doesn't work between B and C because it doesn't apply.
This rule creates gutters between rows and columns inside a grid container.
But you are declaring grid-gap on .upper and .lower, two siblings in a block container. Their parent (.grid) is not a grid container because it doesn't have display: grid or inline-grid.
Therefore, grid-gap: 10px on .upper is creating a 10px gutter between A and B...
and grid-gap: 10px on .lower is creating a 10px gutter between.... nothing (.lower has only one grid item. grid-gap creates gutters between multiple grid items).
fiddle demo 1
For grid-gap to work among the .upper and .lower siblings you need to apply it to their parent, which must be a grid container.
fiddle demo 2
.grid {
display: grid; /* NEW */
grid-gap: 25px; /* NEW */
}
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.lower {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 10px; /* does nothing unless there are multiple grid items */
}
#media ( max-width:800px ) {
.upper {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.upper > * { border: 1px dashed red; }
.lower > * { border: 1px dashed blue; }
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>