Positioning svg’s in a grid, box like structure

Right now they are just in a line.

How would I put them in a grid, box like shape?

https://jsfiddle.net/esj3k16d/2/

How would it work using grid, and how would it work using flex?

Assuming it can work with grid.

.container {
display: inline;

Here is a jsitor link as I hear those are able to better viewed from a mobile device.
https://jsitor.com/r2Leg0wr_

As I said before you can’t just throw in a different layout when the existing layout is built for a different purpose.:frowning:

To have the play buttons say three across you would need to limit the width so that only 3 across would fit but then that would mean when you click the button for the full size background it won’t work because you have made the page a grid of 3 cells across. You’d then need to add some JS to change the outer back to the way it was before you made the grid.

Adding a 3 across with css grid would look something like this.

.outer {
  display:grid;
  grid-template-columns: repeat(3,min-content);
  gap:20px 0;
  align-content:center;
  justify-content:center;
  min-height: 100%;
  box-sizing: border-box;
}

There are probably other ways to do it as that was a quick attempt. Flex could do it also in much the same way as all are a fixed size.

However when you click the play you would need to add a class to .outer that changes the display back to what it was before and resets the column and grid properties.

you would need to add a class to .outer that changes the display back to what it was before and resets the column and grid properties.

Will that fix the issue?

And what class am I adding to outer?

After clicking on the svg’s, nothing appears.

Everything is a blank layout.

https://jsitor.com/YV0AaY3AH

I did this:

.outer {
  display:grid;
  grid-template-columns: repeat(3,min-content);
  gap:20px 0;
  align-content:center;
  justify-content:center;
  min-height: 100%;
  box-sizing: border-box;
}

All I wanted to do was place the the horizontal line of svg’s into a box structure.

I tried this:
https://jsitor.com/Pf1sn7yMY

.outer {
  display:grid;
  grid-template-columns: 110px 110px 110px 110px;
  gap:20px 0;
  align-content:center;
  justify-content:center;
  min-height: 100%;
  box-sizing: border-box;
}

Doing that breaks the code, after clicking on the svg’s, the videos are tiny.

After clicking an svg I get this:

That’s what I just explained to you!

and…

You are not thinking about what is happening.

You are making the whole page divide into your little cells of 110px so that is all the space you will have to show your video unless you do as I mention above and get rid of the columns once the button has been clicked.

Each video is inside that little cell.

As I keep saying the original was designed with one play button in the middle of the whole page. If you want multiple buttons you will need to add a js class to the outer and reset it back to how it was rather than little grids.

1 Like

You’d have to add this document.querySelector('.outer').classList.add('isOpen'); in the JS.

Here:

const manageCover = (function makeManageCover() {
  const config = {};

  function show(el) {
    el.classList.remove("hide");
    document.querySelector('.outer').classList.add('isOpen');
  }
etc...

Then use that class in the css to change it back to flex.

.outer {
  display:grid;
  grid-template-columns: 110px 110px 110px 110px;
  gap:20px 0;
  align-content:center;
  justify-content:center;
  min-height: 100%;
  box-sizing: border-box;
}
.outer.isOpen{display:flex;}
2 Likes

Replicating Grid, using Flex instead, how would it be done?

This was my attempt. I almost got it.

After clicking on the svg’s, the page is not full screen.

Would js need to be added for this one also?

https://jsitor.com/zTLBUIeu1

https://jsfiddle.net/de8wmqt3/1/

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 500px;
  box-sizing: border-box;
  justify-content: center;
  margin: auto;
}

.container {
  display: flex;
  justify-content: center;
}

Also, howw do I set the space between the circles?

I tried using this: gap:20px 0;

But maybe something else would need to be added.

How many times do I have to say this?

Please stop and don’t go any further until you understand why this is happening.

Each grid item (or flex item if used) item needs to fill the whole page (.outer) when you click the button. At the moment they will only have that little box where the circle sits in which to display their background. You have to make the background fill the whole screen when a button is clicked.

Think about how the original was created. It has one button sitting in the middle of a full screen and has a background that fills the full screen. Both are contained within the same parent div. If you make that parent div 110px wide then that’s all you have to display any further content. You can’t suddenly have a background from an element that is 110px wide suddenly fill the whole screen.

In effect you can’t do this without js (or with that structure).

Answered above and this confirms that you still don’t understand what you are asking or how the design actually works.

I showed you in my grid example.

Your example is stretching to the height of the window which I don’t believe is what you wanted.

If you didn’t want that to happen then look at the align and justify rules that I used in my grid example. You would need similar for flex;

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 500px;
  box-sizing: border-box;
  justify-content: center;
  align-content:center;
  margin: auto;
  gap: 20px 0;
}

Please don’t start a discussion on grid and then change it to flex before we’ve even started :slight_smile:

Back tomorrow.

3 Likes

Grid Version I fixed.
https://jsfiddle.net/swuqk95x/1/

I thought, or, my impression was, Grid was finished, there’s more work to be done on Grid?

I meant in a box like structure making an example, one using Grid, and the other Flex.

I should have made it clear in the topic title.

When I was working on it I started trying to figure out Grid first.

If there is more work to be done on the Grid version, we can continue on that one.

I thought because the rest of the code was using flex, that js would not be needed or necessary for the Flex version.

On the Flex version:

I added the js in and the background is not filling the whole screen.

https://jsitor.com/FkBFsfl94

https://jsfiddle.net/mnxjg9s8/

.outer.isOpen {
  display: flex;
}

document.querySelector('.outer').classList.add('isOpen');

You need to over-ride the flex-rules.

e.g.

outer.isOpen {
  display: flex;
  width:auto;
  align-content:stretch;
}

If you are talking about the CSS specs then there’s always work being done on a range of properties. Support for grid in modern browsers is on a par with flex these days.

1 Like

I don’t think this is what you meant,.

Do you mean, or, are you saying that, in the grid version, these could be changed to grid?

https://jsfiddle.net/swuqk95x/1/

.container {
  display: flex;
  justify-content: center;
}
.container.active {
  flex: 1 0 0;
}

.curtain {
  flex: 1 0 0;
}

.container.active .inner-container {
  display: flex;
}

With the Grid version

I am able to do this.
https://jsfiddle.net/1L4zyfve/

.outer {
  display: grid;
  grid-template-columns: 90px 90px 90px;
  gap: 0;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  box-sizing: border-box;
}

Can I do that with the Flex Version?
https://jsfiddle.net/sL15fyo6/

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 390px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 0;
}

Fixed:
https://jsfiddle.net/zmnc5kdg/1/

added:
width: 270px;

.outer {
  width: 270px;
}

Removed margin

.thePlay {
  /*margin: auto 20px;*/
}
1 Like

Why not use a svg element as a container of all those svg elements. then the contained elements can be individually positioned within the container svg. No need to worry about css positioning at all.

1 Like

How would that be set up in the code?

OK you have the code for your circles and you want a 3 by 3 grid with spacing.
So first calculate the top lefthand corner coordinates of the circles. Those coordinates will be the <svg x="" y="" values.

<svg id = "svgContainer">
  <g>
    <svg id = "movie_1" x="?" y="?" >
      <g>
        <path ..........
      </g>
    </svg>
    <svg id = "movie_2" x="?" y="?" >
      <g>
        <path ..........
      </g>
    </svg>
//  add the rest of the movie svg blocks
  </g>
</svg>

The svgContainer will be in your div.container element.
Svg elements can be scaled so the dimensions are not all that important and can be chosen to make the arithmetic easy and then scaled later.
You could also nest another svg and g between the svgContainer and the movie svgs. This would permit placement within the svgContainer without having to change all the x and y values.
Why don’t you go to udemy.com and do one of their tutorials on csv?