使用 CSS 网格隐藏仅部分适合容器的项目

Question

I have a row of items in a container that varies in size depending on the screensize. There will always be items left outside the grid and the last one is usually only half way.

What I need to happen is to completely hide any item that is partially shown. Unfortunately, I do not have a fixed number of items for certain screen-sizes, it is a case in which I need to display however many I can fit in my container. How can this be done?

Here is a sample of what my current code looks like: Notice how the last item only fits partially in the screen. I would like to hide it if it can't completely fit in my container.

How can this be done?

 const Item = () => { return ( <div className="item"/> ); }; const App = () => { return ( <div> <div className="container"> {Array.from({ length: 20 }).map((_, index) => ( <Item key={index} /> ))} </div> <p> Objective: all items need to be within the container. See how the last one only fits half way. I would like it to be completely hidden. </p> </div> ); } ReactDOM.render( <App />, document.getElementById('app') );

 .item { width: 100px; height: 100px; background-color: red; border: 3px solid blue; }.container { padding: 10px; width: 60%; overflow: hidden; border: 3px solid black; /* CSS grid related properties */ display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-auto-rows: 120; grid-auto-flow: column; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="app"></div>

Edit: There is another complication in this mix, which is that I should all hidden items with a button that scroll over to the hidden items whenever pressed. So basically I do still need all items hidden off to the side and not below the visible row.

Answer 1

One (slightly laborious) method would be to attach an after pseudo element to the right hand side of the container which covers the partially-included item.

Here's a simplified JS version. It runs through the items until it gets to the first that is not fully contained in the container, calculates how much is therefore left in the container and sets the width of the pseudo element to that.

This way the remaining items are not affected in any way, they are still 'there' but it does mean that as soon as there is any horizontal scrolling or any resizing of the viewport the calculation has to be done again.

 function hide() { const container = document.querySelector('.container'); const items = container.querySelectorAll('.item'); const containerW = window.getComputedStyle(container).width.replace('px', ''); for ( let i = 0; i < items.length; i++) { const item = items[i]; const w = Number(window.getComputedStyle(item).width.replace('px','')); const rhs = (w + item.offsetLeft); if (rhs > containerW) { container.style.setProperty('--w', w - (rhs - containerW) + 'px'); break; } } } hide(); window.onresize = hide;

 .container { padding: 10px; width: 60%; overflow: hidden; border: 3px solid black; display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-auto-rows: 120; grid-auto-flow: column; position: relative; --w: 0; box-sizing: border-box; }.container::after { content: ''; width: var(--w); background: white; height: 100%; right: 0; top: 0; display: inline-block; z-index: 1; position: absolute; }.item { width: 100px; height: 100px; background-color: red; border: 3px solid blue; box-sizing: border-box; }

 <div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

Note the container and items have been given box-siainv: border-box just to make the calculation easier. If this is removed then the borders and margin settings need to be accounted for.