Question 44983 in Html Question posted in
Some basic documentation can be found here.

How do I go about creating an image broken up into different containers using CSS grid? – Html

(https://i.stack.imgur.com/Vn7rN.png)](https://i.stack.imgur.com/Vn7rN.png)

I want to create the effect of the image in CSS grid, but I can’t figure out how to begin. Can someone please help, or direct me to any sources (videos, websites) that may help? Thank you!

The only thing I can think of is maybe using CSS grid and putting different parts of the same picture into each, but that isn’t time efficient + won’t be consistent.

Tags:

2

Answers


  1. 0

    You can do it something like this. Get your five images, cut each image, and link via ‘img src’. This is fixed width setup.

    * {box-sizing: border-box;}

.row {
  display: block;
  /*--choose your width--*/
  width: 720px;
}

.column {
  float: left;
  width: 100%;
  background:gray;
}

img {padding: 10px 5px 10px 5px; margin: auto;}
.img1 {width:70px; height:200px;}
.img2 {width:140px; height:200px;}
.img3 {width:280px; height:200px;}

.row::after {
  content: "";
  clear: both;
  display: block;
}
    <div class="row">
  <div class="column">
    <img src="https://via.placeholder.com/100x100.gif?text=1" class="img1">
    <img src="https://via.placeholder.com/100x100.gif?text=1" class="img1">
    <img src="https://via.placeholder.com/100x100.gif?text=2" class="img2">
    <img src="https://via.placeholder.com/100x100.gif?text=2" class="img2">
    <img src="https://via.placeholder.com/100x100.gif?text=3" class="img3">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    In this example we will use just ONE image, with vertical gap lines overlaying the image at several places. Adjust/add lines to fit your specific needs.

    * {box-sizing: border-box;}

/*--Minimal container tools--*/
.container {
  position: relative;
  width: 600px;
  max-width: 600px;
  /*--set image to top center--*/
  margin: 0 auto;
}

/*--Keep image and layer stacked exactly on top of each other--*/
.container img {
  vertical-align: middle; 
  width: 100%;
  height: 200px;
}

/*--Content overlay--*/
.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  margin: 0 auto;
  border: none;
}

.co1 {
  position: absolute;
  height: 100%;
  inset-inline-start: 50px;
  border-right: 10px solid #fff;
  background: transparent;
}

.co2 {
  position: absolute;
  height: 100%;
  border-right: 10px solid #fff;
  translate: 70px 0px;
}

.co3 {
  position: absolute;
  height: 100%;
  border-right: 10px solid #fff;
  translate: 140px 0px;
}

.co4 {
  position: absolute;
  height: 100%;
  border-right: 10px solid #fff;
  translate: 180px 0px;
}
    <div class="container">
<img src="https://i.postimg.cc/nzvFVyN5/img01w.jpg" class="">
<!--content overlay-->
  <div class="content">
    <div class="co1">
    <div class="co2">
    <div class="co3">
    <div class="co4">
    </div>
    </div>
    </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search