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?
Related
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;
}
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 am only beginning CSS and HTML so this is definitely a beginner question here. Below is a snippet of my current work:
/* Setup */
* {
box-sizing: border-box; /* Makes like box model work like I'd expect */
}
body {
font-family: 'Roboto', sans-serif;
}
/* Necessary Selectors */
#header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
align-items: end;
}
.logo {
font-family: 'Rampart One', cursive;
font-size: x-large;
}
#header-img {
height: 25px;
}
#nav-bar {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 25px;
}
/* Media Query to change display based on screen width */
#media (max-width: 500px){
#nav-bar {
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(auto-fill, auto);
justify-items: center;
}
#header {
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(auto-fill, auto);
justify-content: center;
align-items: center;
}
}
The issue I am having is that in almost every ID Selector, I have to add display: grid. I am using grid as my main display, so I would like to not retype this. I've tried putting it in * and body selector, but this doesn't work as I expected. * breaks the webpage, and my selectors don't appear to inherit the display from body. Is there a better way?
Option 1 (recommended): Add a class to both #header and #nav-bar:
<header id="header" class="grid"></div>
<nav id="nav-bar" class="grid" aria-label="main navigation"></nav>
And then access the class in the CSS:
.grid {
display: grid;
}
Option 2: Use a comma to combine your CSS selectors:
#header,
#nav-bar {
display: grid;
}
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>
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>