At first, all items in the grid are in the same size i want it to be
But after clicking the 'Load More' button, the height for the new items are not the same:
Example here
I want to make those items the same height as shown in the first image, but I'm not sure how
my html
<div>
<Title message={"Your Top Artists"}/>
<div className="topArtists">
{toDisplay.map(item=>{
return(
<div className="items">
<li className="items-li" onClick={(e) => handleClick(e, item)}>
<Link to={`${path}/artist/${item.id}`}>
{item.name}, {item.followers}, {item.genres}, {item.popularity}
</Link>
</li>
</div>
)
})}
</div>
<button onClick={loadMore}> Load More </button>
</div>
And my Css
.topArtists{
/*width: 100%;*/
display: grid;
grid-template-rows: repeat(3, 250px);
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 15px;
}
.items {
border: 1px solid red;
}
.items-li{
padding: 10px;
font-size: 25px;
list-style: none;
}
Currently, you have set height for only 3 first rows. Use grid-auto-rows instead
.topArtists{
display: grid;
grid-auto-rows: 250px;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 15px;
}
Related
I have a container where I am using grid layout as show below
My HTML looks like this
<div class='pagelayout'>
<div class="tophalf">This div needs to occupy entire width of the page</div>
</div>
CSS looks like this
.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 70fr 30fr;
grid-template-rows: auto auto;
overflow: auto;
grid-template-areas:
'tophalf tophalf'
'leftside rightside'
}
.tophalf{
grid-area: tophalf;
}
Snippet:
.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 70fr 30fr;
grid-template-rows: auto auto;
overflow: auto;
grid-template-areas: 'tophalf tophalf' 'leftside rightside'
}
.tophalf {
grid-area: tophalf;
}
<div class='pagelayout'>
<div class="tophalf">This div needs to occupy entire width of the page</div>
</div>
But the div(This div needs to occupy entire width of the page) is only taking 70fr and the rest 30fr is left unused.
If I change the grid template like this, everythign is working fine.
.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 1fr;
grid-template-rows: auto;
overflow: auto;
grid-template-areas:
'tophalf tophalf'
'leftside rightside'
}
.tophalf{
grid-area: tophalf;
}
Snippet:
.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 1fr;
grid-template-rows: auto;
overflow: auto;
grid-template-areas: 'tophalf tophalf' 'leftside rightside'
}
.tophalf {
grid-area: tophalf;
}
<div class ='pagelayout'>
<div class ="tophalf">This div needs to occupy entire width of the page</div>
</div>
What is that I'm doing wrong in the first case?
grid-template-columns: 70fr 30fr; this means create two colums one which takes 70fr & other which takes 30fr
grid-template-columns: 70fr 30fr;
grid-template-rows: auto auto;
.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 70fr 30fr; /*this means create two colums one which takes 70fr & other which takes 30fr*/
grid-template-rows: auto;
overflow: auto;
outline:2px solid green;
}
.tophalf {
outline:2px solid red;
}
<div class='pagelayout'>
<div class="tophalf">This div needs to occupy entire width of the page</div>
</div>
I have a grid layout that looks like this:
I would like to reduce the whitespace between 'Job Role' and 'Company Name' & I cannot work out how to do this.
The container css looks like this:
.experience-child {
display: grid;
grid-template-columns: 2fr 6fr;
grid-template-rows: repeat(5, 1fr);
margin-bottom: 6em;
font-family: 'Alumni Sans', sans-serif;
}
I have tried:
Adjusting row-gap with row-gap 0;
Adjusting margin-bottom and padding-bottom of the individual elements with negative values.
Adding grid-auto-rows: min-content; to the above container
Thank you very much.
HTML & CSS to replicate:
<div class="experience-child">
<p class="years">2001-2001</p>
<p class="jobrole">Job Role</p>
<p class="company">Company Name</p>
<ul class="job-blurb">
<li>this</li>
<li>that</li>
<li>other</li>
</ul>
</div>
.experience-child {
display: grid;
grid-template-columns: 2fr 6fr;
grid-template-rows: repeat(5, 1fr);
margin-bottom: 6em;
font-family: 'Alumni Sans', sans-serif;
}
.last {
margin-bottom: 0;
}
.jobrole {
font-weight: bold;
}
.company {
grid-area: 2 / 2 / 3 / 3;
font-weight: bold;
}
.job-blurb {
grid-area: 3 / 2 / 5 / 3;
}
grid-template-rows: repeat(5, 1fr); indicates that your grid has 5 rows of equal height. That's the height of the .experience-child container divided by 5.
There are many ways to reduce the whitespace between Job Role and Company Name:
You could reduce the height of the first row, by replacing it with e.g. grid-template-rows: 1em repeat(4, 1fr);
You could keep equal row height and move Job Role within its container with e.g. position: absolute; bottom: 0;, or padding-top: 1em;
You could place Company Name in the same container as Job Role by wrapping <p class="jobrole">Job Role</p><p class="company">Company Name</p> in a new div
Change grid-template-rows: repeat(5, 1fr); to grid-template-rows: repeat(1, 1fr);.
See the snippet below.
.experience-child {
display: grid;
grid-template-columns: 2fr 6fr;
grid-template-rows: repeat(1, 1fr);
margin-bottom: 6em;
font-family: 'Alumni Sans', sans-serif;
background-color: gold;
}
.last {
margin-bottom: 0;
}
.jobrole {
font-weight: bold;
}
.company {
grid-area: 2 / 2 / 3 / 3;
font-weight: bold;
}
.job-blurb {
grid-area: 3 / 2 / 5 / 3;
}
p {
margin: 0;
}
<div class="experience-child">
<p class="years">2001-2001</p>
<p class="jobrole">Job Role</p>
<p class="company">Company Name</p>
<ul class="job-blurb">
<li>this</li>
<li>that</li>
<li>other</li>
</ul>
</div>
buy-page {
display: grid;
grid-template-columns: repeat(2, 1fr);
position: relative;
grid-auto-rows: 1fr;
grid-template-rows: 200px;
grid-gap: 10px;
width: 200px;
height: 400px;
}
<main class="buy-page">
<div class="buy-1 buy">
<img src="../picsfolder/BUY-1.jpg" alt=""> </div>
<div class="buy-2 buy">
<img src="../picsfolder/buy02.jpg" alt=""> </div>
<div class="buy-3 buy">
<img src="../picsfolder/SOLD-1.jpg" alt=""> </div>
</main>
Hi, I am trying to figure out buy-1 goes to the second row.
here is my code,
there are 3 pictures, the first picture can go to the second column with grid-column: span 3;
however, when I am tring buy-1 {grid-row-start:1; grid-row-end:3;} nothing happens.
Would you tell me how to make the buy-1 stretch to the second row, please?
Thank you
Im not sure i fully understand what you are trying to achieve here but
make sure you're referencing your class correctly with .buy instead of buy-page
.buy {
display: grid;
grid-template-columns: repeat(2, 1fr);
position: relative;
grid-auto-rows: 1fr;
grid-template-rows: 200px;
grid-gap: 10px;
width: 200px;
height: 400px;
}
I want to create a 2 column, 3 row image square image gallery.
For some reason when writing code, the height of the boxes are Not filling up grid. How do I make the height of images become square with width?
Code , CSS and HTML below. Images should be touching edge to edge and would like to refrain from naming Pixel size if possible. Isn't there a stretch property or something? Trying to get that to work,
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding: 0px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
If you want to fill up the box height. You should use align-items "stretch" property to the grid container.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);.
grid-template-columns: repeat(3, 1fr);
grid-gap: 0;
padding: 0px;
align-items: stretch;
}
Demo Code
This is your solution and when you resize your window then images will automatically resize.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
padding: 0px;
align-items: stretch; /* Default. Items are stretched to fit the container */
}
img {
width: 100%;
height:auto;
padding: 0px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
This is your source link your source code
Try Following code.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
img {
width: 100%;
height: 140px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
Also make sure to use same size images in case you want to use height:auto
For example I am trying to create a footer with 4 links spaced evenly with the following code
footer{
margin-top: 20px;
border-top: 1px solid #eeeeee;
border-radius: 2px;
}
#footer_list{
display:inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
list-style-type: none;
}
.footer_list_item{
color: #001f3f !important;
}
<footer>
<ul id="footer_list">
<li class="footer_list_item">A Blah Blah Production</li>
<li class="footer_list_item">Phone: xxx-xxx-xxxx</li>
<li class="footer_list_item">Email: support#company.com</li>
<li class="footer_list_item" href="#">Career Info</li>
</ul>
</footer>
http://jsfiddle.net/vq9b7c0e/3/
Is setting a list to display:grid invalid? As all of the items seem to be randomly spaced
Setting an HTML element to display: grid (or inline-grid) is perfectly valid.
According to the W3C definition, the display property applies to all elements.
However, some elements don't play well in some browsers with changes to the display property. See this post (which applies to flex and grid): Flexbox not working on button or fieldset elements
You wrote:
Is setting a list to display: grid invalid? As all of the items seem to be randomly spaced.
Your items are not randomly spaced. The grid has four equal width columns, just like you specified:
Your code:
#footer_list{
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
Your layout (as seen in Chrome, Firefox and Edge):
So I'm not sure what you mean. But here's a simplified version of your code. Since you're already using the HTML5 footer element, which provides meaningful semantics, why the ul?
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 40px;
grid-column-gap: 5px;
}
a {
color: #001f3f !important;
text-decoration: none;
border: 1px solid lightgray;
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: .9em;
}
<footer>
A Blah Blah Production
Phone: xxx-xxx-xxxx
Email: support#company.com
Career Info
</footer>
jsFiddle demo
Dont use "href" in <li>
I do not know exactly what is going on, but it may help you -
footer{
margin-top: 20px;
border-top: 1px solid #eeeeee;
border-radius: 2px;
}
#footer_list{
display:inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 100%;
list-style-type: none;
}
.footer_list_item{
color: #001f3f !important;
}
.footer_list_item a {
word-break: break-all;
}
<footer>
<ul id="footer_list">
<li class="footer_list_item">A Blah Blah Production</li>
<li class="footer_list_item">Phone: xxx-xxx-xxxx</li>
<li class="footer_list_item">Email: support#company.com</li>
<li class="footer_list_item">Career Info</li>
</ul>
</footer>
http://jsfiddle.net/qhv40j1d/