calculator
so the plus symbol has to fit on the lowest row so there is 5 buttons, the other rows still have to have only 4 buttons
each row has a class:
first-row
second-row
third-row
fourth-row
.buttons {
margin-top: 2px;
padding: 20px;
padding-top: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
text-align: center;
color: white;
}
Related
I wish to add the following properties:
display: grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
to my class: .simple-checkbox-options
Providing it doesn't have a parent class called .modal.
I've tried the following:
.simple-checkbox-options{
:has(.modal:not) & {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
}
But it's not working. Any ideas?
I have a column of a defined size (let's say 50px), then an undetermined number of columns that should divide the available space among themselves, and finally another 50px column.
I know this could be achieved if I knew the total number of columns beforehand:
body > div {
grid-template-columns: 50px repeat(3, 1fr) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
I also know I can do a fixed sized column + n columns this way:
body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
But the specific case doesn't work as it could this way. Instead, I'm left with an empty column at the end:
body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr)) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
Is the thing I'm trying to do achievable with grid?
Remove the last column from the grid template. The column template would now look like this:
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));
Then add this:
div div:last-child {
grid-column: -1;
width: 50px;
}
That should work!
I have grid that looks like this:
with the css:
display: grid;
float: left;
gap: 18px;
grid-template-columns: repeat(2, 1fr);
margin-top: 10px;
Is there a way to shorten the distance between Text1 and the start of Text2 long bla...?
(using the grid css and not matgin: -12px for example)
It seems like the distance between them is the width of Text2 long bla... (which is the longest element here)?
thank you!
Using repeat(2, 1fr) will divide the container into 2 equal parts. So if you want to lower the distance between them, you should change your containers width.
.firstContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 300px;
border: 1px solid red;
}
.secondContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 200px;
border: 1px solid green;
}
<section class="firstContainer">
<span>Hello</span>
<span>, World!</span>
</section>
<section class="secondContainer">
<span>Hello</span>
<span>, World!</span>
</section>
Hello i'm having this problem where if i don't have enough items there is more space between them than the row gap i provided? Why is that happening? (i have the same issue when i put flex-wrap:wrap......
This is what i have on the container
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 400px));
grid-template-rows: 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
height: calc(100% - 204px);
padding: 10px 10px 60px 10px;
On the items
height: 100px;
cursor:pointer;
width:100%;
border-radius: 0.75rem;
https://i.stack.imgur.com/f3g2h.png
grid-template-rows: 100px; means that the first row will be 100px and all the other will have an auto height. Either remove the property or use grid-auto-rows: 100px; to make sure all the rows will behave the same
I'm setting up a page that has details of company employees. my problem is that i tried giving my grid items a "grid area" style attribute so that i can use the "grid name" when defining my grid template areas for my container. but suddenly my items disappear. Please what do i need to do to fix the problem ?
.container{
border-right: 2px solid grey;
border-left: 2px solid grey;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
margin-top: 100px;
grid-template-areas {
"head head head"
" . side ."
"foot foot foot";
}
}
.grid-1{
display: grid;
grid-area: head;
}
.grid-2{
display: grid;
grid-area: side;
}
.grid-3{
display: grid;
grid-area: foot;
}
i expect the output of my grid to still show irrespective of the "grid-area" style attribute used but it disappears.
Your syntax for grid-template-areas is incorrect. The value should not be wrapped with curly braces, instead it should look like this:
.container{
height: 400px;
width: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas: "head head head"
" . side ."
"foot foot foot";
}
.grid-1{
display: grid;
grid-area: head;
background-color: pink;
}
.grid-2{
display: grid;
grid-area: side;
background-color: blue;
}
.grid-3{
display: grid;
grid-area: foot;
background-color: green;
}
<div class="container">
<div class="grid-1">Header</div>
<div class="grid-2">Side</div>
<div class="grid-3">Footer</div>
</div>
Looking at this documentation, I see a segment which says:
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.
I see your use of grid-template-columns but none of grid-template-rows. Changing .container to include grid-template-rows may help, something like this (for three rows):
.container{
border-right: 2px solid grey;
border-left: 2px solid grey;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
margin-top: 100px;
grid-template-areas: "head head head"
" . side ."
"foot foot foot";
}
Seems to be working by fixing the typo in grid-template-areas and defining grid-auto-rows. I'd suggest looking into some other CSS property that might be causing the issue since what you provided works pretty well with minor fixes.
.container {
border-right: 2px solid grey;
border-left: 2px solid grey;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
justify-content: center;
grid-template-areas: "head head head" ". side ." "foot foot foot";
}
.grid-item {
border: 1px solid black;
}
.grid-1 {
grid-area: head;
display: grid;
}
.grid-2 {
grid-area: side;
display: grid;
}
.grid-3 {
grid-area: foot;
display: grid;
}
<div class="container">
<div class="grid-item grid-1">Head</div>
<div class="grid-item grid-2">Side</div>
<div class="grid-item grid-3">Foot</div>
</div>