How would I be able to put this inside a table grid, or a CSS grid?

HTML & CSS
1

How would I be able to put this inside a table grid, or a CSS grid?

I’ve been trying to figure this out and couldn’t,

CSS:

.wrap {
  position: relative;
  width: 600px;
  height: 600px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  background: url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
}

.wrap svg:hover path {
  fill: #0059dd;
}

.wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
  background: rgba(0, 0, 0, 0.2);
}

iframe {
  position: absolute;
  top: 0;
  left: 0px;
  cursor: pointer;
}

.wrap .playa,
.playinga {
  margin: 0;
}

.wrap .playb,
.playingb {
  margin: 0 201px 0;
}

.wrap .playc,
.playingc {
  margin: 0 402px 0;
}

.wrap .playd,
.playingd {
  margin: 201px 0 0;
}

.wrap .playe,
.playinge {
  margin: 201px 201px 0;
}

.wrap .playf,
.playingf {
  margin: 201px 402px 0;
}

.wrap .playg,
.playingg {
  margin: 402px 0 0;
}

.wrap .playh,
.playingh {
  margin: 402px 201px 0;
}

.wrap .playi,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}

html:


<div class="wrap">
  <svg class="playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playinga" data-id="M7lc1UVf-VE"></div>
  </div>
  <svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingb" data-id="-QAnOs-O23c"></div>
  </div>

  <svg class="playc" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingc" data-id="drNPMrdmqMQ"></div>
  </div>

  <svg class="playd" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingd" data-id="EBEUhO5_Flk"></div>
  </div>

  <svg class="playe" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playinge" data-id="wE7khGHVkYY"></div>
  </div>

  <svg class="playf" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingf" data-id="D5WkP8JZgdw"></div>
  </div>

  <svg class="playg" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingg" data-id="eI43jkQkrvs"></div>
  </div>

  <svg class="playh" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingh" data-id="R9C5KMJKluE"></div>
  </div>

  <svg class="playi" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingi" data-id="J1gE9xvph-A"></div>
  </div>

</div>

How would I add a table grid or a CSS grid over this?

image
image628×619 177 KB

2

Why is the following selector duplicated in your CSS?

.wrap svg {
   ...
}
1 Like
4

Fixed:

Thanks for catching that.

5

@PaulOB @Ray.H

This was my attempt at a CSS Grid:

But it didn’t work as I had expected it would.

The grid isn’t viewable over the image here.

If the grid was viewable the lines would be a different color.

6

So, I think what I would be using here is a CSS Grid, because a table grid doesn’t allow for border: radius on its corners.

Basically all I’m doing is, adding an image inside a CSS Grid:

The lines should be red, I’m doing something wrong, and can’t figure it out.

7

If your going to do that with grid you’d have to start over with your layout.

All your svg elements are absolute positioned then nudged into place with margins. Then you have the .hide divs so that adds another nine elements (total 18). For the grid to work you would need no nest each svg and it’s hide div within a parent div. That would get you back to nine grid items.


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

.wrap {
  position: relative;
  display: grid;
  grid-template-columns: 198px 198px 198px;
  grid-template-rows: 198px 198px 198px;
  border-radius: 25px;
  background-color: red;
  grid-gap: 3px;
  width: 606px;
  height: 606px;
  border: 3px solid red;
  box-sizing: border-box;
}
.wrap div {background:#fff}

.tl {border-radius:22px 0 0 0}
.tr {border-radius:0 22px 0 0}
.bl {border-radius:0 0 0 22px}
.br {border-radius:0 0 22px 0}
</style>

</head>
<body>

<div class="wrap">
  <div class="tl"></div>
  <div></div>
  <div class="tr"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="bl"></div>
  <div></div>
  <div class="br"></div>
</div>

</body>
</html>
3 Likes
8

The lines in the middle aren’t red though:

CSS Grid: Updated

This one uses ul li nav:
Would I have been able to add border lines over this one?
But they should not be clickable.

This was my attempt using a table grid:
https://jsfiddle.net/g6oaht8f/86/

The red lines go over the image there:
But rounded corners don’t work on it.

Table setup
https://jsfiddle.net/g6oaht8f/58/

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>

</table>

table {
  border-collapse: collapse;
  width: 606px;
  height: 606px;
}

table td {
  border: 3px solid red;
  border-radius: 25px;
}
9

I suggest you forget about using an HTML table. That is specifically for use with tabular data, which is not what you have. It should never be used for purely presentational reasons.

If you want a table-like layout, then use CSS display:table.

https://tympanus.net/codrops/css_reference/display/

4 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.