Here is a possible solution with minimum modifications to the original code.
The main change here is in the grid-template-columns property: Instead of
grid-template-columns: 100px auto 100px;
it’s
grid-template-columns: 100px minmax(0, 1fr) 100px;
If I’m not wrong, a value of auto takes the inner content in account as well as the availalable width so that breaks the desired width limitation. On the other hand, minmax(0, 1fr) means that 1fr would be the maximun width for this column. 1fr is one fraction of what remained after the other fixed-width columns took their own space, and since there is only one column remained it takes the entire remaining width.
Another minor change to the code is fixing the broken padding by changing 10 to 10px.
main {
background-color: aqua;
display: grid;
grid-template-columns: 100px minmax(0, 1fr) 100px;
grid-template-rows: auto;
grid-template-areas: 'mainleft maincenter mainright';
}
.left {
grid-area: mainleft;
background-color: coral;
}
.right {
grid-area: mainright;
background-color: coral;
}
.gallery {
grid-area: maincenter;
position: relative;
width: 100%;
padding: 0 10px;
}
.gallery_scroller {
/* snap mandatory on horizontal axis */
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 300px;
/* Enable Safari touch scrolling physics which is needed for scroll snap */
-webkit-overflow-scrolling: touch;
}
.gallery_scroller img {
/* snap align center */
scroll-snap-align: center;
scroll-snap-stop: always;
margin: 22px;
}
<main class="main">
<div class="left">
</div>
<div class="gallery">
<div class="gallery_scroller">
<img src="https://placeimg.com/300/300/animals/grayscale" />
<img src="https://placeimg.com/360/480/animals/grayscale" />
<img src="https://placeimg.com/640/480/animals/grayscale" />
<img src="https://placeimg.com/360/360/animals/grayscale" />
<img src="https://placeimg.com/2560/960/animals/grayscale" />
<img src="https://placeimg.com/360/360/animals/grayscale" />
</div>
</div>
<div class="right">
</div>
</main>
I know isn’t the best solution but it works for you because images are causing overflow
.gallery {
grid-area: maincenter;
position: relative;
width: calc(100vw - 200px);
/*width: 100%; Not working */
padding: 0 10;
}
btw
your padding isn’t working because doesn’t have units, maybe u wanted px
I’m trying to make a page with a horizontal scrolled image gallery using flex grid.
The gallery should be centered on the page with bars on the sides. To accomplish this, I have created a css grid with areas 'mainleft maincenter mainright'. It shuld look something like this:
The problem is the page is not responsive. So, if I do not set max-width of the gallery the site looks like this:
The gallery overflows the entire page. Setting max-width to 100% do not work. Setting max-widt to something like 700px works but then the page is not responsive anymore.
Code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HScroll gallery test</title>
<style>
main {
background-color:aqua;
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: auto;
grid-template-areas: 'mainleft maincenter mainright';
}
.left {
grid-area: mainleft;
background-color:coral;
}
.right {
grid-area: mainright;
background-color:coral;
}
.gallery {
grid-area: maincenter;
position: relative;
max-width: 100%; /* Not working */
padding: 0 10;
}
.gallery_scroller {
/* snap mandatory on horizontal axis */
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 300px;
/* Enable Safari touch scrolling physics which is needed for scroll snap */
-webkit-overflow-scrolling: touch;
}
.gallery_scroller img {
/* snap align center */
scroll-snap-align: center;
scroll-snap-stop: always;
margin:22px;
}
</style>
</head>
<body>
<main class="main">
<div class="left">
</div>
<div class="gallery">
<div class="gallery_scroller">
<img src="https://placeimg.com/300/300/animals/grayscale"/>
<img src="https://placeimg.com/360/480/animals/grayscale"/>
<img src="https://placeimg.com/640/480/animals/grayscale"/>
<img src="https://placeimg.com/360/360/animals/grayscale"/>
<img src="https://placeimg.com/2560/960/animals/grayscale"/>
<img src="https://placeimg.com/360/360/animals/grayscale"/>
</div>
</div>
<div class="right">
</div>
</main>
</body>
</html>
main {
background-color:aqua;
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: auto;
grid-template-areas: 'mainleft maincenter mainright';
}
.left {
grid-area: mainleft;
background-color:coral;
}
.right {
grid-area: mainright;
background-color:coral;
}
.gallery {
grid-area: maincenter;
position: relative;
width: 100%; /* Not working */
padding: 0 10;
}
.gallery_scroller {
/* snap mandatory on horizontal axis */
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 300px;
/* Enable Safari touch scrolling physics which is needed for scroll snap */
-webkit-overflow-scrolling: touch;
}
.gallery_scroller img {
/* snap align center */
scroll-snap-align: center;
scroll-snap-stop: always;
margin:22px;
}
<main class="main">
<div class="left">
</div>
<div class="gallery">
<div class="gallery_scroller">
<img src="https://placeimg.com/300/300/animals/grayscale"/>
<img src="https://placeimg.com/360/480/animals/grayscale"/>
<img src="https://placeimg.com/640/480/animals/grayscale"/>
<img src="https://placeimg.com/360/360/animals/grayscale"/>
<img src="https://placeimg.com/2560/960/animals/grayscale"/>
<img src="https://placeimg.com/360/360/animals/grayscale"/>
</div>
</div>
<div class="right">
</div>
</main>
Yes, Noam, have tried 100vw. But then you include the width of the bars to the left and right.
Noam. How? ‘maincenter’ is set to auto, adjusting to the size of the browser window.
Thanks, but I’m looking for a more generic solution. I want the gallery to adjust to the size of the parent container. Or the maincenter area. Content on the sides could be anything, maybe some percentage of the page.
