I have an array I'm mapping into image sources to form an image gallery. At the moment it maps down one column. I'm unsure how to make it fill the other columns. Any tips would be much appreciated!
This is current output
Aiming to have -
[123]
Code -
<div className="image-grid">
<SRLWrapper options={options}>
{data.home.galleryImage.map((image, index, caption) => (
<div className="image-item" key={`${index}-cl`}>
<img src={`http:XXX${image.url}`} alt="" class="galleryimg"/>
<div class="imgoverlay">
<div class="imgtext">zoomie</div>
</div>
</div>
))
}
</SRLWrapper>
</div>
css -
.image-grid {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
column-gap: 2rem;
}
.image-item {
position: relative;
width: 100%;
display: block;
margin-bottom: 2rem;
}
The reason is simple. Your display:grid property is only applied on SRLWrapper component.
You need to set the set the className="image-grid" in the parent element of your SRLWrapper component and then it will work :)
SRLWrapper.js file returns some JSX. What you have right now is only one grid-item for your grid-container. That's why even though you have set your 3-columns for your grid container, there is only one child element SRLWrapper to show.
One Trick: Always always use Developer Console (Ctrl+Shift+I) to debug these scenarios because we get the actual picture there.
In the CSS file
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
change autofit to 3 it might work
Related
I have two divs. Inside each div, there are two divs:
<div class="hide">
<div>
Variable size
</div>
<div>
Text1 (also variable size)
</div>
</div>
<div class="hide">
<div>
Different variable size
</div>
<div>
Text2 (also variable size)
</div>
</div>
If the screen is too small, I want the texts to disappear:
To do it, I used
.hide {
display: flex;
height: 100px;
flex-wrap: wrap;
overflow: hidden;
}
However, if the 1st text is too big, but the second is not, I have something like that:
And I'd like them to be hidden simultaneously.
Is there a way (no jQuery) to do it? Preferably with CSS or SASS, but JS (I use Angular) would also be acceptable.
Use display flex like this
.hide { height: 100px; display: flex; flex-wrap: wrap; overflow: hidden; }
I created a responsive grid which should contain rows of 4, 3, 2 or 1 items, depending on the window size. Hard requirement from Design is that no widows and no half filled rows are allowed. So for 11 items, there could be two rows of four items and one of three, or three rows of three items and one of two items, or... . You get the idea.
To solve the problem, I created a css grid:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
grid-gap: 24px;
This works fine for the resizing, but it does not take care of the widow problem. At first I did the naive approach of selecting the last item with a last-of-type selector and giving it a grid-row: 1 / -1 style, but that does not ensure that the row above is fully filled.
I guess there won't be a css only solution. Is there a way for an element to realize that it is alone in a row, or that it has to grow to fill the row? I had an idea using the nextSibling property to select the last child via JavaScript and maybe determine via the page offset if it fills the whole row. But my problem is that I can't hardcode the width of the screen.
Alternatively, is there a way to tell an element to spread until the end of the row? I tried this, but it did not work:
.card:last-of-type {
grid-column-end: span -1;
}
Click here for minimal reproducible example.
A solution is to use flexbox instead of grid. This way it can stretch with the screen size.
We use 25% for a 4 column layout. Subtracting 1rem for a bit of margin. (0.5 left + 0.5 right)
(Open snippet in fullscreen to see it working)
.my-grid {
display: flex;
flex-wrap: wrap;
}
.card {
min-width: 264px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 1px #00000026;
font-size: 14px;
background-color: red;
margin: .5rem;
flex: 1 1 calc(25% - 1rem);
}
<div class="my-grid">
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">blub</div>
</div>
I have a <app-body> tag which is like the main section of the app, above and below it I have a header and a footer.
<app-body> is set to display: grid. It is split into 12 equally spaced columns. It’s css looks like this.
.app-body{
width: 100%;
min-height: calc(100vh - 150px); //150px is the height of the header footer and margins
overflow-y: scroll;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
I have <app-article> and an <app-sidebar> components inside it so it looks like this
<app-body class='app-body'>
<app-article> </app-article>
<app-sidebar> </app-sidebar>
</app-body>
<app-article> looks like this
<div class='article-body'>
<p> jsfanasffanmslkjfdslakfsa lorem lorem lorem</p>
<img src-'safdlsdkafjsdak>
</div>
and it’s css
.article-body{
grid-column: 1 / 8;
}
It doesn’t work because it’s looking at the <app-article> tag for the columns. It can’t see the .app-body.
Any suggestions?
So, Ive been working this for a days and I cant find on how to expand my remaining divs using grid. I used an array (map) to iterate my array of objects thats why I cant figure it out because all I know only is by targeting every div and set property grid-row/grid-column to be able them to fit. This is new to me because I cant target them because its iterating. Im using react in case you wonder why I iterate them.
{data.map(item => {
return (
<Item
key={item.id}
title={item.title}
description={item.description}
/>
);
})}
// This is my style for Card.
div.container-card{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 250px 250px;
margin-top: 30px;
}
The output is I got 6 card next to each other in the top, and 4 at the bottom. What I want is I want to expand those remaining 4 at the bottom to fit in the whole width. Any idea guys because Im just a beginner(obviously).
Ive just added a background width to the background:
... {
width: 80%;
margin: 0 auto;
}
I am creating a simple web app using angularjs for managing some kind of tickets. Tickets should be displayed in grid (.ticket-container). I am using CSS display: grid and rows and columns are dynamically set based on config file. Setting of the grid columns and rows is done using this code:
vm.getGridStyleDefinition = function () {
return {
"grid-template-rows": "repeat(" + vm.numberOfRows + ", 1fr)",
"grid-template-columns": "repeat(" + vm.numberOfColumns + ", 1fr)"
}
};
The simplified structure of the page is:
HTML
<div class="container">
<div class="flex1">
<div class="ticket-container">
<ticket></ticket>
<ticket></ticket>
<ticket></ticket>
...
</div>
</div>
<div class="menu-bar"></div>
</div>
CSS
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.flex1 {
flex: 1;
align-items: stretch;
display: flex;
}
.ticket-container {
display: grid;
width: 100vw;
grid-template-rows: repeat(5,1fr); // dynamically set
grid-template-columns: repeat(3,1fr); // dynamically set
padding: 1vh;
grid-gap: 1%;
}
.menu-bar {
background-color: blue;
}
My problem is that fractions in grid (1fr), for rows, are not calculated based on the container height, but reather on the content inside the cells. I want to force the content inside the cells to take the space that is available and not to overflow, or to force the grid to squeeze the content.
Here is codepen for this issue: link
If there is another approach to create grid that its cells will not overflow, please suggest.
Thanks in advance