I can't figure out why my css is completely ignored. The images are full size and the images from the bottom row end up on top of the top row. I want them to be the same size and next to each other on each row and the other rows not end up on top of the other rows.
return(
products.map((product) =>(
<div className="product">
<button>
<div className="product_body">
<img src={product.image_url}></img>
<h2 className="product_title">{product.name}</h2>
<p>{product.price}</p>
<p>{product.added}</p>
</div>
</button>
</div>
)))
CSS:
.App {
text-align: center;
}
.containerWrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.product {
max-width: 35px;
height: 25px;
}
.product {
max-width: 35px;
height: 25px;
}
.product .product_body {
max-width: 35px;
height: auto;
display: flex;
flex-direction: column;
}
Related
I have a layout which I can't achieve.
Here is an example of how it should behave.
I thought best way would be using grid, but I am opened to suggestions. So it should have width: auto, but if there is task.comment - width of task should become 100% of container and height should be responsive to task.comment content.
<div className='tasks-preview'>
{tasks.map(task => (
<div className='task'>
<div className="text-container">
<p className="task-name">{task.name}</p>
<p className="task-hour">{task.hour}h</p>
</div>
{task.comment ? <div className="comment-container">
<CommentIcon />
<p className="task-comment">{task.comment}</p>
</div> : null}
</div>))}
</div>
My CSS looks like this:
.tasks-preview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, max-content));
gap: 12px;
.task {
display: flex;
flex-direction: column;
justify-content: flex-start;
background: $light;
color: $main-text;
width: fit-content;
height: 22px;
padding: 4px 6px;
border-radius: 4px;
.text-container {
display: flex;
align-items: center;
gap: 6px;
p {
margin: 0;
}
}
.comment-container {
display: flex;
gap: 8px;
color: $main-accent;
.task-comment {
display: flex;
}
}
}
}
Currently I have this layout and don't know how to move forward because it's far from what I need:
I have a two column layout. Left has an image. Right has 2 images on top of each other. My goal is to have the images increase as much as possible but have to keep their aspect ratio. And of cause can't overflow outside the containing height.
Right now if you change the width of the browser window, the image resize respecively in a correct way. But if you decrease the height of the window, the images does not decrease in size.
Any tips.
outer-container has height calc(100vh -100px). it is suppose to simulate having a sticky footer.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
}
.right-image {
width: 100%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
Just add max-height properties to the .left-image and .right-image rules so they do not overflow their parent containers.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
max-height: 100%;
}
.right-image {
width: 100%;
max-height: 50%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
This might work as a starting point. Not 100% sure how you want the first column in relation to the second.
I added a footer since you seemed to indicate that?
.outer-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 100px;
background-color: green;
height: 100vh;
}
.left-column {
/* keeps the left image in the box */
min-height: 0;
grid-row: 1 / 2;
grid-column: 1 / 1;
border: solid cyan 2px;
display: flex;
justify-content: center;
}
.right-column {
border: solid yellow 2px;
display: flex;
align-items: start;
justify-content: top;
flex-direction: column;
}
.left-image {
height: 100%;
}
.right-image {
width: 100%;
}
.footer {
/* put accross all columns of last row and super center content */
grid-column: 1 / 3;
grid-row: 3 / 3;
background-color: #ffdd88;
display: grid;
align-items: center;
justify-content: center;
}
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</div>
<div class="footer"> I am the footer thing</div>
</div>
Trying to evenly space out all grid items in the middle of the page:
App Component:
return (
<div className="App">
<div className="App__box">
<Box />
</div>
</div>
);
}```
App Css:
.App {
$large-screen: 1024px;
$xlarge-screen: 1280px;
text-align: center;
&__box {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 16px 16px;
}
#media (min-width: $large-screen) {
&__box {
grid-template-columns: repeat(2, 2fr);
justify-items: center;
}
}
}
Ps the desired outcome i am trying to achive for the `$large-screen` breakpoint
fix the with with max-width property
then give it
margin: 0 auto;
width: 100%;
If I have understood the question, it's possible by using justify-self and nth-child. see code:
.boxes {
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 16px 16px;
}
.box {
width: 10rem;
padding: 1rem;
text-align: center;
background-color: red;
justify-self: end;
}
.box:nth-child(2) {
background-color: blue;
justify-self: start;
}
<div class="App">
<div class="boxes">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
You could try using a
{
display: flex;
flex-wrap: wrap;
}
and try out justify-content prop for parent component, and for child components could use flex-grow prop.
Check out:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Looks like the html element takes up the entire page, body has a little gap at the top for some reason, but my div still won't take up the rest of the remaining space.
Here's the html tree in the browser
App.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: nunito;
}
html,
body,
#root,
.App {
height: 100%;
width: 100%;
}
HistorySheet.jsx
if (!loading) {
return (
<div className="historySheet">
<Searchbar
location={location}
changeLocation={changeLocation}
weatherData={weatherData}
/>
<div className="backdrop">
<div className="headers">
<p>Date</p>
<p>Avg</p>
<p>High</p>
<p>Low</p>
<p>Phase</p>
</div>
{results()}
<img onClick={addResults} src={expand} alt="expand icon" />
</div>
</div>
);
} else {
return <p>Loading...</p>;
}
HistorySheet.css
.historySheet {
max-width: 60%;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
height: 100%;
}
.backdrop {
width: 100vw;
background: #468faf;
padding: 1.5rem 17rem;
}
.headers {
width: 100%;
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
text-align: center;
color: white;
font-weight: 300;
}
.results {
height: 100%;
}
I've tried doing min-width on everything, but it doesn't change.
If you want historySheet to have 100% width then you need to remove max-width from .historySheet
I am investigating into CSS and Grid right now, as I want to learn new things. Actually, I do have a very simple question (I guess) but I am unable to resolve this. I am trying to use CSS grid for making a simple responsive design. For that purpose, I want to have a header section in which I do have a logo and a menu centered with a maximum width of 1170 px. However, I am unable to center the header-wrapper. Maybe I am doing things wrong here. For a better understanding, I just put a jsiddler here.
https://jsfiddle.net/f7ywrg93/
.wrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: 100px auto;
grid-template-areas:
"header"
"promo";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #20262e;
color: #fff;
font-size: 14px;
}
.promo {
grid-area: promo;
background-color: #c0ff3e;
}
.wrapper-header {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-template-areas: "logo menu";
max-width:1170px;
grid-gap: 20px;
background-color: #447666;
}
.logo {
grid-area: logo;
place-self: start;
max-width: 300px;
background-color: #545454;
}
.menu {
grid-area: menu;
place-self: end;
background-color: #eadead;
}
<div class="wrapper">
<div class="header">
<div class="wrapper-header">
<div class="logo">Logo</div>
<div class="menu">Menu</div>
</div>
</div>
<div class="promo">Promo</div>
</div>
Hope that one can give me some give me some idea what I am doing wrong.
If you swap place-self: start and place-self: end for the logo and menu it will center them:
.wrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: 100px auto;
grid-template-areas:
"header"
"promo";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #20262e;
position: relative;
color: #fff;
font-size: 14px;
}
.promo {
grid-area: promo;
background-color: #c0ff3e;
}
.wrapper-header {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-template-areas: "logo menu";
max-width:1170px;
width: 100%;
grid-gap: 20px;
margin: 0 auto;
background-color: #447666;
}
.logo {
grid-area: logo;
place-self: end;
max-width: 300px;
background-color: #545454;
}
.menu {
grid-area: menu;
place-self: start;
background-color: #eadead;
}
<div class="wrapper">
<div class="header">
<div class="wrapper-header">
<div class="logo">Logo</div>
<div class="menu">Menu</div>
</div>
</div>
<div class="promo">Promo</div>
</div>
place-self positions the elements within their respective grid blocks and not within the container element itself.