I am using grid to display 4 columns, but for some reason I can't use justify-content: space-between on them.
Example code:
<div class"wrapper">
<div class"columns">
<div class"column1"></div>
<div class"column2"></div>
<div class"column3"></div>
<div class"column4"></div>
</div>
</div>
.wrapper {
max-width: 1200px;
width: 90%;
margin: 0 auto;
}
.columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: space-between;
}
What am I achieving right now:
RIGHT NOW
What I want to achieve:
ACHIEVMENT
! Pay attention: 1) Displaying items as flex and justify space between is not a solution for me, because I want to use grid.
2) Giving columns grid-gap is also not a solution for me.
Thanks for your help in advance!
Related
I am trying to center a div that has a few inner div with some classes.
For example:
<div class="one">
<div class="two">
<article class="three">
...
</article>
</div>
</div>
Assume we don't know what classes one, two, and three are. Is it possible to center horizontally <div class="one"> and everything inside?
I have tried for example text-align: center; as style but it didn't work.
UPDATE:
Actually, tacoshy's recommendation worked, but it is not exactly what I want. Please see these drawings:
This is before applying tacoshy's recommendation:
This is after applying his recommendation:
And this is what I want:
Is is possible to make the books closer together at the center?
To center an element, the best way in my opinion is by using Flexbox. You just got to add those 3 properties to the parent :
display: flex
justify-content: center
align-items: center
So in your exemple, I believe it's the body if you want to center the only div on your page. Otherwise, you need a way, by aiming a div using an ID instead of class, or with :nth-child(n).
text-align: center works only for text or other elements with display: inline
Why not using CSS Grid? (don't if you are using bootstrap with the css grid option)
.one {
display: grid;
background-color: white;
width: 80vw;
height: 80vh;
margin: 10vh 10vw;
}
.two {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0;
}
.three {
background-color: yellow;
border: 1px solid black;
width: 20vw;
height: 100%;
}
.three:first-child {
justify-self: end;
}
.three:last-child {
justify-self: start;
}
<div class="one">
<div class="two">
<article class="three">
...
</article>
<article class="three">
...
</article>
</div>
</div>
I am trying to understand how CSS grids work. I've tried to make an example of a store item as practice, but I am at a loss.
Here's my how my CSS currently looks. Cut off at the top, weird spacing, and the right side is not coming together at all.
How's how it would ideally look
Here is my current CSS, I hope someone can help explain where I am misunderstanding the use of
CSS grids.
.store-currency {
height: 3vh;
}
.item {
display: flex;
align-items: center;
grid-row: 1 / span 2;
}
.currency {
display: flex;
align-items: center;
}
#num-bought-item0 {
display: flex;
align-items: center;
justify-content: right;
margin-right: 10px;
grid-column: 1 / span 2;
}
.store-item {
height: 15vh;
width: 100%;
display: grid;
grid-template-columns: 2fr;
grid-template-rows: 1fr 1fr;
font-size: 24px;
color: white;
border: 5px white solid;
justify-content: left;
align-items: center;
}
.store-item img {
margin: 10px;
height: 8vh;
}
.store-container {
display: flex;
height: 100%;
width: 30vw;
z-index: 0;
background-color: saddlebrown;
left: 0;
position: absolute;
text-align: center;
}
HTML:
<div class="store-container">
<div class="store-item" id="item0">
<div class ="item">
<img src="dumbell.png" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item0">
<span>Owned</span>
<span id="count-item0">0</span>
</div>
<div class="currency">
<img class="store-currency" src="coin.png" alt="">
<span>100000</span>
</div>
</div>
you did the first steps.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
.store-container {
display: grid | inline-grid;
}
grid – generates a block-level grid
inline-grid – generates an inline-level grid
With grid-template-columns you can define how many columns will appear in your layout.
P.S Fr unit is a fractional unit and 1fr is for 1 part of the available space. In this example each column would take ~ 25% from the available space.
.container {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
For your task, you can use grid-template-areas feature.
The grid-template-areas CSS property specifies named grid areas,
establishing the cells in the grid and assigning them names.
For example:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
This will generates something like that in modern browsers:
If you need more examples, take a look here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
https://css-tricks.com/snippets/css/complete-guide-grid/
Some of the examples are taken from the second site.
It looks like you are mixing flex and grid properties. grid-row and grid-column are only avalaible for a grid display (2D), not a flex display (1D).
You can try to play around with flex (worse choice since it is drawing a 1D layout) , you can use grid , which is made for this kind of layout.
Here a couple example with flex and grid
/* GRID make it simple*/
.grid {display:grid;}
#num-bought-item2 {grid-row:1/3;grid-column:2;}
#num-bought-item2 {display:grid;margin:auto;text-align:center}
/* layout done */
/* some reset for the demo*/
*{box-sizing:border-box;}
.store-container {display:grid;justify-content:center;}
.store-item {border:solid;}
.store-item>div {padding:0.5em;}
img{vertical-align:middle;}
[src="https://dummyimage.com/25/ff0"]{border-radius:50%}
big{color:darkgreen;background:lightyellow;}
/* FLEX make it a mess */
.flex {display:flex}
.column {flex-flow:column wrap;height:120px;}/* here an height is to be set so it wraps*/
/* since it is not made for this, we need to mess around */
.flex #num-bought-item1{order:2}/* reorder item */
.flex .item {height:0;min-height:60%;}/* hide it, then show it */
.flex .currency {height:0;min-height:40%;}/* hide it, then show it */
.flex #num-bought-item1{display:flex;flex-direction:column;justify-content:center;text-align:center;margin:auto;}
/* and flex did not do it */
<p>Let's try via flex</p>
<div class="store-container">
<div class="store-item flex column" id="item1">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item1" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
<p>And via <big>grid</big> </p>
<div class="store-container">
<div class="store-item grid" id="item2">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item2" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
This question already has answers here:
How to center elements on the last row in CSS Grid?
(8 answers)
Closed last year.
I have a CSS Grid like this, and I want to be able to center the child elements horizontally. For example, in this pic, I want to see "Queen" come in the center and not at the left side.
Trying with align-items: center and justify-content: center does not work. What do I do?
This is my CSS (scss) for the grid (parent):
display: grid;
gap: 1rem 0;
grid-template-columns: 1fr;
--node-min-width: 235px;
#media (min-width: 576px){
grid-template-columns: repeat(auto-fit, minmax(var(--node-min-width), 1fr));
}
with a flex container you can play with flex property on item to manipulate their size
here is the minimal code to have a similar situation working
.element {
background:darkgrey;
color:white;
text-align:center;
margin-top: 12px;
flex:0 0 25%;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content:center;
}
<div class="grid">
<div class="element">rook</div>
<div class="element">bishop</div>
<div class="element">knight</div>
<div class="element">king</div>
<div class="element">queen</div>
</div>
So I've got .articleWrapper for post child items that scales just as I want it to scale. However placing this .articleWrapper inside another wrapper-element with dipslay: flex suddenly breaks .articleWrappers ability to scale horizontally after certain point.
There must be some flaw in my logic, but I can't find it.
Below is the code. If I remove display: flex and flex-wrap: wrap; the grid works fine. Also if I replace flex with block, it works fine. If I put display: flex; back in grid-content no longer stack.
.siteWrapper {
display: flex;
flex-wrap: wrap;
}
.articleWrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(285px, 1fr));
max-width: 1100px;
margin: auto;
}
article {
background-color: red;
}
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="siteWrapper">
<div class="articleWrapper">
<article>
<h1>Title</h1>
<p>Para</p>
</article>
<article>
<h1>Title</h1>
<p>Para</p>
</article>
</div>
</div>
</body>
It seems I found one solution myself, but I still don't understand why it works.
Adding width: 100%; to .articleWrapper seems to have fixed the issue in this case.
As you can see in the picture, I can manage the second words to be exactly at the same distance from the start of the line by pressing the Tab key.
I want to have the same functionality in HTML. I know I can do this using <table> but I'm curious to know if there is any easier way like MS word or not.
<span>Firstword<span> <span>Second<span>
<br>
<span>Second<span> <span>Third<span>
You can use a flex css to achieve the desired result. Also, add a margin-right according to your need.
<style>
.row {
display: flex;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
margin-right: 1em;
}
</style>
<div class="row">
<div class="col">
<span>Firstword</span> <span>Second</span>
</div>
<br>
<div class="col">
<span>Third</span> <span>Fourth</span>
</div>
</div>
You can specify the width of the spans, so the others will be in the same position:
.tab{
display: inline-block;
width: 150px;
}
<span class="tab">Firstword</span><span>Second</span>
<br>
<span class="tab">Second</span><span>Third</span>
Take a look at this solution using grid
It is very complex, but gives you (like Word) total control over spacing on the page or element.
I divided the grid in columns of 10 pixels and rows of 20 pixels.
body {
display: grid;
grid-template-columns: repeat(auto-fill, 10px);
grid-template-rows: repeat(auto-fill, 20px);
}
span:nth-child(odd) {
grid-column: 1
}
span:nth-child(even) {
grid-column: 12
}
<span>Firstword</span><span>Second</span>
<span>Second</span><span>Third</span>