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
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 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;
}
In the example below, .grid-container has grid-template-rows: 1fr set, but the row does not grow, even though there is plenty of extra room. It seems to behave like grid-template-rows: auto. Any ideas as to what's going on here? As a sidenote, this is a contrived demo for practice, there are better ways to lay this out, but I'm curious about why it doesn't work like I expect. Thanks for any help!
Update - Appears to work as expected in Firefox and Safari, but not Chrome.
.flex-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.grid-container {
flex-grow: 1;
background-color: orange;
display: grid;
grid-template-rows: 1fr;
place-items: center;
}
.grid-item {
padding: 1.5em;
background-color: rgba(0,0,0,.3);
}
nav {
display: flex;
padding: 1em;
justify-content: space-around;
}
body {
margin: 0;
}
<div class="flex-container">
<nav>
Link
Link
Link
Link
</nav>
<div class="grid-container">
<div class="grid-item">Grid Item</div>
</div>
</div>
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.
What I have is a two-column layout with several items inside:
.grid {
column-count: 2;
}
.grid-item {
break-inside: avoid;
height: 50px;
margin-bottom: 10px;
background-color: green;
text-align: center;
line-height: 50px;
color: white;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
https://codepen.io/Deka87/pen/RgdLeZ
Now I need an ability to reorder those items inside the columns with CSS only (so they were in a different order on different screen resolutions), so I thought I can do this with:
.grid {
display: flex;
flex-direction: column;
column-count: 2;
}
.grid-item:nth-child(1) {
order: 5;
}
Obviously, this didn't work and broke the 2-column layout. Anybody tried to solve this before? Any chance I can get this working?
PS: Items on the same line should not be of the same height (I could have used simple floats in this case). Sorry for not specifying in the beginning.
Without a fixed height on the container, a column of flex items won't know where to wrap. There's nothing to cause a break, so items will continue expanding the single column.
Also, column-count and display: flex represent two different CSS technologies. column-count is not a valid property in a flex container.
CSS Grid Layout may be useful to you:
re-size the screen width to trigger the media query
revised codepen
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, auto);
grid-auto-rows: 50px;
grid-auto-flow: column;
grid-gap: 10px;
}
.grid-item {
background-color: green;
text-align: center;
line-height: 50px;
color: white;
}
#media ( max-width: 500px) {
.grid-item:nth-child(2) {
order: 1;
background-color: orange;
}
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
I tend to use flexbox for this
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.grid-item {
box-sizing: border-box;
width: calc( 50% - 5px );
min-height: 50px;
margin-bottom: 10px;
background-color: green;
text-align: center;
line-height: 50px;
color: white;
}
.grid-item:nth-child(1) {
order: 5;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
The flex syntax is widely supported and super flexible.