I need to achieve something like that:
where this grey square is actually an image, that can be changed.
it has to be done by background, I cannot place simply img there.
I tried to achieve this with linear gradient, which will be easy if I can just set the background for specific area, but the fact that the what you can see in the image below it is just right 50% of the background complicates this. I tried different solutions for some time and I am clueless.
You could use CSS grid to get the visuals in your image:
const img = document.getElementById('img')
img.style.backgroundImage = "url('http://placekitten.com/200/300')"
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
.container {
height: 100%;
width: 100%;
background: gray;
display: grid;
grid-template-columns: 1fr 10px 50%;
grid-template-rows: 1fr calc(50% - 10px) 50px 10px 1fr
}
.img-wrapper {
grid-column: 3 / 3;
grid-row: 2 / 4;
background: red;
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.partial-border {
grid-column: 2 / 4;
grid-row: 3 / 5;
background: blue;
}
<div class="container">
<div class="partial-border"></div>
<div id="img" class="img-wrapper"></div>
</div>
I have successfully created a CSS Grid layout. However, now I want to add support or a fallback for non or poorly supported browsers, specifically IE11.
I have added browser prefixes and read a million articles about adding floats, etc. I created a block of code that should work, but I cannot for the life of me get it to render when testing on IE11 (I have a Mac laptop with no access to a PC).
// sass-lint:disable no-important no-vendor-prefixes no-duplicate-properties final-newline
// Grid Variables
$cols: 12 !default;
$gutter: 50px !default;
// Breakpoints
$lg: 1199.98px;
$md: 991.98px;
$sm: 767.98px;
$xs: 575.98px;
$breakpoints: (
(l, $lg, 100%, 1),
(m, $md, 100%, 2),
(s, $sm, 100%, 2),
(x, $xs, 100%, 3),
(no, 0, 100%, 3)
) !default;
// Typography
$font-size: 20px;
$font-family: 'BrokenEn', serif;
$line-height: 1.4;
// Animations
$grid-animation: all .15s ease-in-out;
$grid-animation-slow: all .3s ease-in-out;
// Globals
*,
*::after,
*::before {
backface-visibility: hidden;
}
html {
box-sizing: border-box;
margin: 0;
overscroll-behavior: none;
padding: 0;
}
body {
background-color: #fff;
border: 0;
box-sizing: inherit;
color: #000;
font: normal 1rem $font-family;
height: 100%;
left: 0;
line-height: 1;
margin: 0;
overflow-x: hidden;
padding: 0;
position: relative;
}
// Grid
header,
main,
footer {
background-color: #f5f5dc;
width: 100%;
}
.r {
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
background-color: #7fffd4;
display: -ms-grid !important;
display: grid !important;
grid-gap: $gutter;
grid-template-columns: repeat($cols, 1fr);
position: relative;
transition: $grid-animation;
}
[class*='c-'] {
-ms-grid-column-span: $cols;
background-color: #faebd7;
grid-column: span $cols;
position: relative;
&.nest {
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
background-color: #7fffd4;
display: -ms-grid !important;
display: grid !important;
grid-gap: $gutter;
grid-template-columns: repeat($cols, 1fr);
position: relative;
}
&.contain-auto {
margin-left: $gutter;
margin-right: $gutter;
}
&.contain-fixed {
margin-left: auto;
margin-right: auto;
width: $lg;
}
}
.col-wrap {
display: inline-block;
padding: 0 $gutter;
width: 100%;
}
.no-c-gap {
grid-column-gap: 0 !important;
}
#for $i from 1 through $cols {
.c-#{$i} {
-ms-grid-column-span: $i;
grid-column: span $i;
}
}
#each $name, $size, $container, $divide in $breakpoints {
#media only screen and (max-width: $size) {
.r {
grid-gap: $gutter / $divide;
}
[class*='c-'] {
&.nest {
grid-gap: $gutter / $divide;
}
&.contain-auto {
margin-left: $gutter / $divide;
margin-right: $gutter / $divide;
}
}
#for $i from 1 through $cols {
.#{$name}#{$i} {
-ms-grid-column-span: $i;
grid-column: span $i;
}
}
}
}
#supports not (display: grid) {
.r {
display: inline-block !important;
width: 100% !important;
::after {
content: ' ';
display: block;
width: 100%;
}
[class*='c-'] {
display: block !important;
float: left !important;
margin: 0 $gutter $gutter 0;
}
}
#for $i from 1 through $cols {
.c-#{$i} {
width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
}
}
#each $name, $size, $container, $divide in $breakpoints {
#media only screen and (max-width: $size) {
#for $i from 1 through $cols {
.#{$name}#{$i} {
width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
}
}
}
}
}
// If #support not supported by browser.
#media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.r {
display: inline-block !important;
width: 100% !important;
::after {
content: ' ';
display: block;
width: 100%;
}
[class*='c-'] {
display: block !important;
float: left !important;
margin: 0 $gutter $gutter 0;
}
}
#for $i from 1 through $cols {
.c-#{$i} {
width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
}
}
#each $name, $size, $container, $divide in $breakpoints {
#media only screen and (max-width: $size) {
#for $i from 1 through $cols {
.#{$name}#{$i} {
width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
}
}
}
}
}
Could someone help me look over the code and tell me how I can (1) better my grid, (2) get the "#supports not (display: grid)" code to work in IE11?
EDIT:
This would be an example of how it looks in all modern browsers, and how I would want it to look after the IE fallback kicks-in.
<body>
<header class="r">Header</header>
<main class="r">
<section class="c-12 nest ratio-4-3">
<div class="c-6">
<div class="wrap">Div Left</div>
</div>
<div class="c-6">
<div class="wrap">Div Left</div>
</div>
</section>
<section class="c-12 nest no-c-gap ratio-4-3">
<div class="c-6">
<div class="wrap">Div Left</div>
</div>
<div class="c-6">
<div class="wrap">Div Left</div>
</div>
</section>
</main>
<footer class="r">Footer</footer>
</body>
#supports isn't supported in IE So you have to put code in there for browsers that DO support grid. It should override your NON-Grid code. (remove the "not").
Grid is only partly supported in IE so you're likely better off using a polyfill for support over the partial options in the browser.
If you need to do a lot of cross-browser testing, look into a tool like BrowserStack.
Edit: to suggest a course of action.
I suggest this approach.
Re-write everything using a layout technique other than CSS Grid. People have been making cross-browser, performant, responsive layouts for years without grid. This will likely work across ALL your target browsers. If at this point, you get something better by using CSS Grid, use it as progressive enhancement.
The reason, I suggest this is a different layout technique might require additional containers/wrappers forcing your markup to change. It will be difficult to add these in, only "when grid won't work".
I'm using a feature query, my goal is to display grid on all browsers except IE. IE doesn't support feature queries, so all code in the feature query will be ignored.
It's working for me in IE, but on Chrome/all other browsers the code outside of the feature query is applying styles, but the feature query is still working like it's displaying grid, but also taking the margin/padding from the code outside of the feature query. Is there a way around this?
feature query
#supports(grid-auto-rows:auto){
.Gallery{
display:-ms-grid;
display:grid;
grid-gap: 5px;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
grid-auto-rows:95px;
grid-auto-flow: dense;
}
.horiz{
-ms-grid-column-span: 2;
grid-column: span 2;
}
.vert{
-ms-grid-row-span: 2;
grid-row: span 2;
}
.big{
-ms-grid-column-span:2;
grid-column:span 2;
-ms-grid-row-span: 2;
grid-row: span 2;
}
.imgContainer {
width: 100%;
height: 100%;
}
.img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
styles outside of the feature query that's being applied
.Gallery {
display: flex;
flex-wrap: wrap;
margin: -1em 0 1em -0.5em;
}
.img {
padding: 1em 0 0 0.5em;
flex: 1 0;
min-width:100%;
height:100%;
}
How are flex widths calculated? If I had 3 columns, how would I compensate for removing one of them, i.e. replacing 2 flex columns with 1 and keeping the exact same width. Is it at all possible?
Example:
https://jsfiddle.net/xssyv8y1/
section {
display: flex;
height: 200px;
div {
&:first-child {
flex: 1 0 100px;
}
&:nth-child(2) {
flex: 10 0 400px;
}
&:last-child {
flex: 1 0 150px;
display: none;
}
}
}
This question already has answers here:
How to dynamically generate a list of classes with commas separating them?
(3 answers)
Closed 7 years ago.
So I'm creating a very simple grid and want to limit the amount of repeated declarations.
My Scss grid
$columns: 12;
$margin: 10;
$max-width: 1200;
// do not edit these values
$layout-margin-width: $max-width + $margin * 2;
$percent-margin: $margin / $layout-margin-width;
// Grid Container
.main {
max-width: $max-width + px;
margin: 0 auto;
&:before,
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
// Grid Columns
#for $i from 1 through $columns {
.grid-#{$i} {
width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
padding: 0;
margin: 0 $percent-margin * 100%;
float: left;
}
}
Which outputs to
.main { max-width: 1200px; margin: 0 auto; }
.main:before, .main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.grid-1 { width: 6.69399%; padding: 0; margin: 0 0.81967%; float: left; }
//
.grid-12 { width: 98.36066%; padding: 0; margin: 0 0.81967%; float: left; }
That creates a lot of repeating CSS so I'd like to be able to have a list the grid class names together and have float:left etc in a single declaration, like this
.grid-1,
.grid-2,
//
.grid-12 {
float:left;
//other declarations
}
How do I structure the Scss loop to do this?
I think you can do something like this using #extend.
Example
%grid {
float:left;
}
#for $i from 1 through $columns {
.grid-#{$i} {
width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
padding: 0;
margin: 0 $percent-margin * 100%;
#extend: %grid;
}
}
This will then output your css like this.
.grid-1,
.grid-2,
.grid-3 {
float: left;
}