score:2
you can use css max-height
and @media
queries to achieve this effect:
- give the
.stocks-container
amax-height
which corresponds with the height of a single grid row and declareoverflow: hidden
this ensures that there will now only ever be a single row visible (ie. no vertical wrapping of rows).
- now add a short series of break-point media queries to reset
grid-template-columns
as percentages of the viewport width.
this enables those grid boxes which are still visible to fill the entire horizontal width reserved for the .stocks-container
.
working example:
.stocks-container {
display: grid;
grid-template-columns: repeat(5, calc(20% - 6px));
grid-template-rows: 92px;
grid-column-gap: 6px;
grid-row-gap: 6px;
max-height: 92px;
font-size: 11px;
overflow: hidden;
}
.stocks-container div {
height: 80px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}
@media only screen and (max-width: 900px) {
.stocks-container {
grid-template-columns: repeat(4, calc(25% - 6px));
}
}
@media only screen and (max-width: 750px) {
.stocks-container {
grid-template-columns: repeat(3, calc(33.33% - 6px));
}
}
@media only screen and (max-width: 600px) {
.stocks-container {
grid-template-columns: repeat(3, calc(50% - 6px));
}
}
<div class="stocks-container">
<div>
<h2>company 1</h2>
<p>company stock</p>
</div>
<div>
<h2>company 2</h2>
<p>company stock</p>
</div>
<div>
<h2>company 3</h2>
<p>company stock</p>
</div>
<div>
<h2>company 4</h2>
<p>company stock</p>
</div>
<div>
<h2>company 5</h2>
<p>company stock</p>
</div>
</div>
Source: stackoverflow.com
Related Query
- CSS how to only show 1 row and hide the others?
- Display only one row and hide others in CSS Grid
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- How to expand and collapse the table rows in plain react js. Show only one row if the description of the row is multiple and show the expand button
- Show only clicked element in array and hide the others React
- REACT JS How to show one component and hide the others on click
- how to show and hide popup only when promise is active ? React
- React MaterialTable editable row validation - how to show and hide error?
- How to stop the past timer and show only the upcoming timer in React?
- How to iterate over an array of object and show only the latest value in a child component?
- Show only One Component on a Route and Hide All Others
- How to only show the view and not the (view + links) upon clicking the links?
- How can I show and hide the textfield type number depending on which radio button was clicked?
- ReactJS :: How to Show Only Relevant Menu Items and Hide Other Menu Items Upon Page Change
- How to show the content and hide the content conditionally in react using hooks
- How to Show and Hide with id when the checkbox is checked
- How can I hide my navbar on the homepage and make it only visible once the user has logged in?
- How to show drop menu and hide others in React.js
- How to remove CSS from global scope and only import to the specific pages in React, Gatsby
- How to show single hidden element of list and hide the rest
- How to wait for AJAX response and only after that render the component?
- How to show and hide some columns on React Table?
- How to hide the OK and Cancel buttons of antd Modal?
- how to hide and show a div in react
- How to fetch data only once in a Next.js app and make it accesible to all the app, both in server and client
- How to disable and hide the pagination footer for react-table?
- ReactJS how to render a component only when scroll down and reach it on the page?
- How to show the only part of the image
- <Fade> in material-ui just disables the visibility of the component . How to get the fade effect and actually hide the component ?
- How to set the Google Analytics cookie only after another consent cookie is set and "true"?
More Query from same tag
- Run useEffect only if certain values are true, but don't re-run unless the dependencies change
- appolo-link-rest set header
- My chartJS axios.get is fired twice causing chart to render twice too and i don't know why. I'm using react-chartjs-2
- How do I add BrowserRouter in index.js file of a react app?
- Reducer is acting weird
- Dealing with 'immediately invoking' functions as object properties
- React Router Pass Param to Component
- Anonymous class in React
- Executing code on server only
- React is taking setstate as a function
- Why won't "draggable = 'true'" work on React rendered component?
- How do I import Ant Design React UI library and css?
- How do I store 5 variable input values in one variable in js?
- How to make useEffect rerun only on change of a single dependency?
- how to set condition in react router DOM version 6?
- react-slick carousel somehow adding link to every image
- React Material UI table add custom button
- capture all user interactions in a react application centrally
- Improve URL component to be better reactjs code
- How to get second duplicate value rather than first value from JSON Array in React JS using lodash?
- react form update state from redux props
- How to integrate ReactJS application with Wagtail API. Steps to follow?
- React redux do not propagate state
- Converting class based js useState array to typescript Hook problem
- Handling Loading and null case from API in react/redux
- React importing function from other file
- Better way to catch the state of my action in my app + react-redux +react-router
- React.js Virgin: Why is my hard coded data being passed differently than data entered by user?
- How to use a npm package for development without building it every time?
- How to let textbox only english can be input like type="password"?