0

Idea

So I want to make an item container which looks like this in the picture. I started with creating an .grid-container, then going on with divs inside the container with .grid-item & .item1.
<div class="grid-container">
<div class="grid-item item1></div>
</div>

for .css I had the idea for skew(-12.5deg)
.grid-container{
transform: skew(-12.5deg);
}

.grid-item{
transform: skew(12.5deg); //unskew
}

.item1{
background-image:url(item1.jpg);
}

Sadly the items won't unskew... They just rotate the image inside the item, but I want them to stay straight, just the "border/layout" should be skewed.

Also the grid won't let me place the items in one line, they just make another line... Maybe switch to flexbox?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Hannes Hildebrandt
  • 1
  • This page explains everything about diagonal layouts, perhaps it could help you https://9elements.com/blog/pure-css-diagonal-layouts/ –  Sep 14 '21 at 14:15
  • grid requires a `grid-template-columns` to be set else to draw columns, defaut value is 1fr, so it will be a single column. You should share enough of your code to reproduce your issue. Minimal HTML & CSS . doing so, you may find yourself why it went wrong ;) , if not we can see what you really have and help from there. – G-Cyrillus Sep 14 '21 at 14:18

0 Answers0