Hi,
i would like to have the clickable tiles in form of a grid (or something else) and the image being spaned over the whole background. The background just being showd where the tiles are which also have a alpha transparency background colors. The grid itself being white.
I dont know how to describe this but please have a look at the picture. Going crazy with this one.
hi @adauda can you show origin of example from image as IMHO it is absolutely impractical and achieve something like this with responsiveness in mind will take lots of effort without satisfying result.
- grid (or flex) gap is empty space and can’t have color this mean you have to go around.
You can use border instead but there are other issues in you image there is no white space on left in first item in row and right on last item. When item change on smaller devices to two columns the last item from row 1 will be now first item of row 2 and so on. Another thing is that using borders is impractical for other reasons eg. they can’t collapse etc. etc.
- background image or image need to be set to
coverbe able to dynamically cover area.
When you have 3 rows with 3 items on desktop image will have height of 3 rows. when you will have on mobile 9 rows by 1 item and image will have height of 9 rows mean will be extremely zoomed in.
- using a nine item is inconvenient primarily for one reasons 9 can’t be divided by 2 to avoid odd number.
This is my input why you may start thinking about this design again.
m2c
Good luck
1 Like
Thank you first all.
The origin is not a Site but a figma design i was given.
- how can i give the gap a color? if that is possible it might work with overlapping two grids with clipping?
I had the idea with border but this messes up the responsiveness so badly
hi @adauda sorry for typo I have fixed it now it is correct: gap is a space that can’t have a color.
I feel sorry for you AFAIK most designers come to web design from publishing world where you can place on “paper” absolutely anything. You can see it eg. on Dribbble where 80% of “web design” looks great but in reality it is technically wrong when you think about responsiveness .
A good web designer should be aware at least with basics of HTML and/or CSS or have constructive discussion about design with developer durning its creation as website has its limitation compare to paper. There is always space to push the limits but …
You should let know your designer that this design will be hard to create with responsiveness in mind. What I mean there can be a way to use container queries and change background image based on container width. But …
TBH I have never need to create something like this. Ask designer what is a budget and if will be generous you can spend more time on it otherwise it is IMO not worth of time and energy.
Try to talk to designer explain technical limitations and try to find some compromise 
good luck
1 Like
hi @adauda I have been just interested how to and I have tried a several approaches like punch hole in div with SVG etc. Just let you know that any possible solution is not a “clean code” but hacking browser limitations. Anyway here is what I have come with that some way “will do the job” . Feel free to adjust code to your needs or use it as starting point to experiment.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
:root {
--fake-gap: 4px;
--hsl-green: 152 78% 50%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid__c {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 1440px;
background-image: url("link/to/your/image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
}
.container {
aspect-ratio: 1/1;
position: relative;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: var(--fake-gap) solid white;
}
.content__w {
height: 100%;
padding: calc(var(--fake-gap) + 1rem);
}
.green {
background: hsl(var(--hsl-green) / 0.2);
}
</style>
</head>
<body>
<div class="grid__c">
<div class="container">
<div class="content__w">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w green">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w green">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w green">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w green">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w green">
<h1>text 2</h1>
</div>
</div>
<div class="container">
<div class="content__w">
<h1>text 2</h1>
</div>
</div>
</div>
</body>
</html>
I didn’t bother to use container queries to change image based on container width, this part is challenge for you 
EDIT: here is short preview of result
2 Likes