How to implement squares grid design

Issue

Is there a practical way to implement such a design in the attached image on a webpage using CSS, What only came to my head is creating a grid add and giving its items a border and placing the rest wherever... but that does really sound and feel ugly. Any ideas?

Solution

Here is a very basic example of grid using your layout.

NOTE: You may need to use some restrictions on resizing to get the layout to keep its aspect ratio.

Two important notes:

1. In the grid container we use grid-template-areas and we literally write in the placement of each corresponding elements unique class into the layout. 'dots' --> . will skip that section of the row/column.
2. Each unique element will have a class assigned to it that will point to its self using the grid-area:

.img-1 {
  grid-area: img-1;
}

In my example I created 21 rows with I think 16 columns. This can be expressed using grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr or grid-template-rows: repeat(1fr), basically we are telling the grid to use up 1 fraction of the row for each element 100% of the row = 16 equal elements, then they are placed in the DOM relevant to their grid-template-areas.

A great way to 'get it' is to visually inspect the grid-template-areas with each line on a new line as I have laid it out in my example. You can see where the img-1 takes up in regards to the other elements in the layout. Remember dots represent nothing, a single fraction of that row/column will get taken up with nothing in it.

Hope this helps.

.container {
  margin: 0 auto;
  display: grid;
  width: 550px; /*for display purposes to keep aspect ratio*/
  height: 900px; /*for display purposes to keep aspect ratio*/
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(1fr);
  grid-auto-flow: row;
  grid-template-areas: 
  ". . . . . . . . . . . . . . ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . . . . . . ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . pr-2 pr-2 title-2 title-2 title-2 title-2 title-2 ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . title-2 title-2 title-2 title-2 title-2 ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . title-2 title-2 title-2 title-2 title-2 ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . img-2 img-2 img-2 img-2 img-2 img-2" "pr-1 pr-1 title-1 title-1 title-1 title-1 title-1 title-1 title-1 img-2 img-2 img-2 img-2 img-2 img-2" 
  ". . title-1 title-1 title-1 title-1 title-1 title-1 title-1 img-2 img-2 img-2 img-2 img-2 img-2" 
  ". . title-1 title-1 title-1 title-1 title-1 title-1 title-1 img-2 img-2 img-2 img-2 img-2 img-2" 
  "heading heading heading heading heading heading heading heading . img-2 img-2 img-2 img-2 img-2 img-2" 
  "heading heading heading heading heading heading heading heading . img-2 img-2 img-2 img-2 img-2 img-2" 
  "heading heading heading heading heading heading heading heading . pr-3 pr-3 line-3 line-3 line-3 line-3" "heading heading heading heading heading heading heading heading . pr-4 pr-4 line-4 line-4 line-4 line-4" 
  ". . . . . . . . img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "pr-5 pr-5 title-5 title-5 title-5 title-5 title-5 title-5 img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  ". . title-5 title-5 title-5 title-5 title-5 title-5 img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  ". . title-5 title-5 title-5 title-5 title-5 title-5 img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . ico-1 ico-1 sec-1 line-5 line-5 line-5 line-5" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . ico-1 ico-1 . . . . ." 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 desc desc desc desc desc desc desc desc" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 desc desc desc desc desc desc desc desc";
}

.img-1 {
  grid-area: img-1;
}

.title-2 {
  grid-area: title-2;
}

.pr-2 {
  grid-area: pr-2;
}

.img-2 {
  grid-area: img-2;
}

.title-1 {
  grid-area: title-1;
}

.pr-1 {
  grid-area: pr-1;
}

.pr-3 {
  grid-area: pr-3;
}

.pr-4 {
  grid-area: pr-4;
}

.line-3 {
  grid-area: line-3;
}

.line-4 {
  grid-area: line-4;
}

.heading {
  grid-area: heading;
}

.pr-5 {
  grid-area: pr-5;
}

.img-6 {
  grid-area: img-6;
}

.title-5 {
  grid-area: title-5;
}

.img-5 {
  grid-area: img-5;
}

.ico-1 {
  grid-area: ico-1;
}

.sec-1 {
  grid-area: sec-1;
}

.line-5 {
  grid-area: line-5;
}

.desc {
  grid-area: desc;
}

html,
body {
  height: 100%;
  margin: 0;
}


.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="section img-1"></div>
  <div class="section title-2"></div>
  <div class="section pr-2"></div>
  <div class="section img-2"></div>
  <div class="section title-1"></div>
  <div class="section pr-1"></div>
  <div class="section pr-3"></div>
  <div class="section pr-4"></div>
  <div class="section line-3"></div>
  <div class="section line-4"></div>
  <div class="section heading"></div>
  <div class="section pr-5"></div>
  <div class="section img-6"></div>
  <div class="section title-5"></div>
  <div class="section img-5"></div>
  <div class="section ico-1"></div>
  <div class="section sec-1"></div>
  <div class="section line-5"></div>
  <div class="section desc"></div>
</div>

Using Flex with calculated values using variables set with a division of your incremented boxes.

You simply set up rows and then move your elements around relative tot heir positions within the rows. It makes it easy with your set up as you have a set number of boxes which can be used using top and left positioning with calculated values of the percentage of the parent elements width/height. See the examples and study the CSS to see how it can be accomplished.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html {
  --w-inc: calc(100%/15);
  --h-inc: calc(100%/23);
}

#cont {
  display: flex;
  flex-direction: column;
  width: 550px;
  height: 800px;
  background-image: url('https://webstockreview.net/images/square-border-png-6.png');
  background-size: var(--w-inc) var(--h-inc);
}

.box {
border: 1px solid #ddd;
background: white;
}

.row-1 {
  width: 100%;
  height: calc(var(--h-inc) * 5);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.img-1 {
  width: calc(var(--w-inc) * 6);
  height: 100%;
}

.pr-2 {
  width: calc(var(--w-inc) * 2);
  height: 20%;
  position: relative;
  left: calc(var(--w-inc) * 1);
  top: 20%;
}

.title-2 {
  width: calc(var(--w-inc) * 5);
  height: 60%;
  position: relative;
  left: calc(var(--w-inc) * 1);
  top: 20%;
}

.row-2 {
  width: 100%;
  height: calc(var(--h-inc) * 5);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.pr-1 { 
  width: calc(var(--w-inc) * 2);
  height: 20%;
  position: relative;
  left: 0;
  flex-shrink: 0;
}
.title-1 {
  width: calc(var(--w-inc) * 7);
  height: 60%;
  flex-shrink: 0;
}
.img-2 {
  width: calc(var(--w-inc) * 6);
  height: 120%;
  position: relative;
  left: 0;
  top: -20%;
  flex-shrink: 0;
}
.row-3 { 
  width: 100%;
  height: calc(var(--h-inc) * 2);
  position: relative;
  top: calc(var(--h-inc) * 1);
  display: flex;
}
.title-3 {
  width: calc(var(--w-inc) * 8);
  height: 200%;
  position: relative;
  top: -100%;
  flex-shrink: 0;
}
.rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.row-4 {
  height: 50%;
  display: flex;
  flex-shrink: 0;
}
.pr-4 {
  width: calc(100% / 7 * 2);
  margin-left: calc(100% / 7);
  flex-shrink: 0;
}
.title-4 {
  width: 100%;
}
.row-5 {
  height: 50%;
  display: flex;
  flex-shrink: 0;
}
.pr-5 {
  width: calc(100% / 7 * 2);
  margin-left: calc(100% / 7);
  flex-shrink: 0;
}
.title-5 {
  width: 100%;
}

.row-6 {
  width: 100%;
  height: calc(var(--h-inc) * 6);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.pr-6 {
  width: calc(var(--w-inc) * 2);
  height: calc(100% / 6);
  position: relative;
  left: 0;
  top: calc(100% / 6);
  flex-shrink: 0;
}

.title-6 {
  width: calc(var(--w-inc) * 6);
  height: calc(100% / 6 * 3);
  position: relative;
  left: 0;
  top: calc(100% / 6);
  flex-shrink: 0;
}
.img-6 {
  width: calc(var(--w-inc) * 7);
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  flex-shrink: 0;
}

.rows-5 {
  width: 100%;
  height: calc(var(--h-inc) * 4);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.img-7 {
  width: calc(var(--w-inc) * 7);
  height: 150%;
  position: relative;
  left: 0;
  top: calc(100% / 6 * -3);
  flex-shrink: 0;
}
.rows-1 {
  height: 50%;
  display: flex;
  flex-shrink: 0;
}
.icon-1 {
  width: calc(100% / 8 * 2);
  margin-left: calc(100% / 8);
  flex-shrink: 0;
}
.sec-2 {
  width: calc(100% / 8);
  height:  calc(100% / 4 * 2);
}
.sec-3 {
  width: calc(100% / 8 * 4);
  height:  calc(100% / 4 * 2);
}
.rows-2 {
  height: 50%;
  width 100%;
}

<div id="cont">
  <div class="row-1">
    <div class="img-1 box">
    </div>
    <div class="pr-2 box">
    </div>
    <div class="title-2 box">
    </div>
  </div>
  <div class="row-2">
    <div class="pr-1 box">
    </div>
    <div class="title-1 box">
    </div>
    <div class="img-2 box">
    </div>
  </div>
  <div class="row-3">
    <div class="title-3 box"></div>
    <div class="rows">
      <div class="row-4">
        <div class="pr-4 box"></div>
        <div class="title-4 box"></div>
      </div>
      <div class="row-5">
        <div class="pr-5 box"></div>
        <div class="title-5 box"></div>
      </div>
    </div>
  </div>
  <div class="row-6">
    <div class="pr-6 box"></div>
    <div class="title-6 box"></div>
    <div class="img-6 box"></div>
  </div>
  <div class="rows-5">
    <div class="img-7 box"></div>
    <div class="rows">
      <div class="rows-1">
        <div class="icon-1 box"></div>
        <div class="sec-2 box"></div>
        <div class="sec-3 box"></div>
      </div>
      <div class="rows-2 box">
      </div>
    </div>
   
  </div>
</div>

Answered By - dale landry