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;
}
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>
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;
}
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
I would like to use CSS Grid to create a set of unevenly sized content columns which, for smaller viewports, stack vertically instead of horizontally.
My starting point is this codepen, which has three repeated columns of equal size that stack when you change the size of the viewport (by making the browser window smaller, for example). That pen starts out looking like this:
When I halve the available screen space, it shrinks down to like this:
This automatic breaking behavior is achieved with the follow grid definition in CSS:
.wrapper-wrapper {
display: grid;
grid-template-columns: 1fr minmax(0, 1024px) 1fr;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
grid-column: 2/-2;
}
I modified this code to use unevenly sized columns in this codepen:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
grid-gap: 10px;
}
But when I resize the browser window, instead of stacking in the rows like the first example, this example does the following:
But I want the following to happen:
The only difference between the first example and the second is that in the second, an unevenly sized grid column layout is used. If I modify the following line:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
And replace it with:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr));
As in the first example, it begins to do what I want again.
What do I need to do to preserve this behavior in the uneven columns case?
The problem code:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(200px, 3fr)
minmax(200px, 4fr)
minmax(200px, 3fr));
grid-gap: 10px;
}
.content-section {
background: lightblue;
}
.item-image {
width: 100%;
}
<div class="layout">
<div class="content">
<div class="content-section sidebar left-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section content-main">
<div class="center-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section sidebar right-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
</div>
</div>
I want to make my website using CSS grid system but it seems not to be working. Here is my code:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
When using the grid-template-areas property, string values must have the same number of columns.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
You can use a period, or an unbroken line of periods, to represent an empty cell (spec reference).
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" " ... about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
From the Grid spec:
7.3. Named Areas: the grid-template-areas
property
All strings must have the same number of columns, or else the declaration is invalid.
If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.
Non-rectangular or disconnected regions may be permitted in a future version of this module.
Note: As stated in the spec, in addition to an equal number of columns, grid areas must also be rectangular (see this post for more details).
If this:
Is the desired result, then you've only made a minor error.
You've set the grid to be a 2 x 2 square here:
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
But you aren't filling all the space.
grid-template-areas: "logo faq", "about-us";
That line of code is saying "In the top two squares put logo and faq respectively. In the bottom two rows put about-us" and that causes an error. If you want one grid-area to fill the entire space then you need to declare it twice. Thus the above line becomes:
grid-template-areas: "logo faq", "about-us about-us";
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq", "about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>