Adding two sets of Grid-Gaps

This is a working version I made, but there is no Grid-Gap added to each,
the cover, and the videos.

https://jsfiddle.net/obgqhctu/4/

.container-top {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: auto auto;
}

If I take that code and add in the gap.
https://jsfiddle.net/je3ps7vb/1/

What is left is adding in the gap for the videos.
grid-column-gap: 34px;

I don’t know how I would be able to implement 2 different sets of grid-gaps.

Covers

  display: grid;
  grid-column-gap: 378px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

Videos

  display: grid;
  grid-column-gap: 34px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

I tried this, almost got it, but not quite.
https://jsfiddle.net/je3ps7vb/2/

.container-top,
.wrap-left,
.wrap-right {
  display: grid;
  grid-column-gap: 34px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;
}

I couldn’t work out what you are trying to achieve?

Do you just want a specific gap between the 2 items?

You don’t need to apply all those rules to wrap-left and wrap-right either. Just use container-top.

.container-top {
  display: grid;
  grid-column-gap: 34px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;
}

These are 2 different sized grid gaps, how would I implement that?
https://jsfiddle.net/je3ps7vb/1/

Covers

  display: grid;
  grid-column-gap: 378px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

Videos

  display: grid;
  grid-column-gap: 34px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

Would something like this work?

.container-top {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;
}

.container-cover {
  grid-column-gap: 378px;
}

.container-video {
  grid-column-gap: 34px;
}

This was my attempt:
https://jsfiddle.net/dve7xk6y/4/

I may have the html part set up wrong, I’m not sure.

.container-top {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;
}

.container-top, .container-cover {
  grid-column-gap: 378px;
}

.container-top, .container-video {
  grid-column-gap: 34px;
}

I tried this way also
https://jsfiddle.net/trwh5koL/3/

.container-top {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;
}

.container-top, .jacket-right,
.container-top, .jacket-left{
    grid-column-gap: 378px;
}

.container-top, .wrap-right,
.container-top, .wrap-left{
    grid-column-gap: 34px;
}

You will need to tell me what gap you want between the 2 different sets?

To me it would be logical just to centre both sets in the space available and no need for a grid-gap property.

e.g.

.container-top {
  display: grid;
  justify-content:space-evenly;/* won't work in edge*/
  align-items: center;
  grid-template-columns:auto auto;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  overflow: hidden;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

However it sounds to me as though you want the small items closer together but the large videos evenly spaced?

If you want different alignment for both items then of course you will need an extra set of rules somewhere to move as required.

I would need an extra set of rules then.

This rule is doing nothing in your code above?

.container-top, .container-cover {
  grid-column-gap: 378px;
}

You still haven’t told me how you want them to behave so I can’t offer code yet. I think the best option is to centre everything but it seems you want some sort of special alignment.

It should be doing this:

Small Covers

  display: grid;
  grid-column-gap: 378px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

Videos

  display: grid;
  grid-column-gap: 34px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

The code I gave you in post #6 will do that.

It’s not using.
grid-column-gap: 378px;

No you don’t need the grid gap at all.

Remove all the grid gap rules and replace with the code I gave you. It does work in Edge fine (its flex that doesn’t like grid-gap in edge).

I’m using fixed grid gaps.

They need to be set like this.
They have to be specific.

Covers
grid-column-gap: 378px;

Videos
grid-column-gap: 34px;

No don’t use them.

How would I get it to working using fixed gaps?

Is it impossible, it can’t be done?

Using my code will produce perfect automatic results.

You can’t have the same property being two different things at once? Think about what you are asking.

You would need to instead add margins to the inner elements as they are different elements for each set and then you can set them as you want.

Or when you click the video dynamically add a class to the parent container and then you could modify the grid gap. The problem is that you don;t say what you want to happen when one video is large and the other is small so you would need a third grid gap to do this.

The code I gave you handles all of this nicely.

1 Like

I was trying to convert this float that has set margins to grid.

Where the spacing wouldn’t change at all.
https://jsfiddle.net/a0no52hy/2/

Where I would be able to remove all these margins from it.

.container-left-video .jacket-left {
  margin-left: 196px;
}

.container-right-video .jacket-right{
  margin-left: 196px;
}

.container-left-video .wrap-left {
  margin-left: 25px;
}

.container-right-video .wrap-right{
  margin-right: 25px;
}

And replace them with these instead.

Covers

  display: grid;
  grid-column-gap: 378px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

Videos

  display: grid;
  grid-column-gap: 34px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

Then you need to set the grid item to be the width of the video so that the space is preserved.

This should achieve what you want without margins or grid-gap.

.container-top {
  display: grid;
  justify-content:space-evenly;
  justify-items:center;
  align-items: center;
  grid-template-columns:424px 424px;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  overflow: hidden;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

justify-content:space-evenly; will space the 424px width evenly and then justify-items:center; will make sure the smaller content items are centred in the 424px container.

How would I be able to set a background color of the
grid-template-columns

Where you can see it?

Like it’s done here.
https://jsfiddle.net/boilerplate/responsive-css-grid

This is saying 372 gap, not 378.
https://jsfiddle.net/1nyapgbc/4/

.container-top {
  display: grid;
  justify-content: space-evenly;
  justify-items: center;
  align-items: center;
  grid-template-columns: 424px 424px;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  overflow: hidden;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}