Kevin Powell - Community•2w ago

Grid acting weird

https://codepen.io/saad-shehzad-the-bashful/pen/ZEgOMmQ why isnt the grid getting 1 or 2 column? in the mobile layout its like not changing

saad shehzad

CodePen

Untitled

...

18 Replies

clevermissfox•2w ago

You’re never reverting or overwriting the elements that have grid-col span 3 so even though you’ve set the template to 2 cols at least one of the children is telling the grid it needs at least 3 columns to span

Code-S ♛•2w ago

HC_stare

Code-S ♛•2w ago

so like if i do 1 column it will span 3?

clevermissfox•2w ago

It looks like for mobile screens you want the grid to have two columns. If you tell the child to span three , then the grid will have three columns. You have to decide how much of the grid you want the children to take up on mobile. Are they all stacked in one column? Or are some children in one column and some take up both columns ? You’ll have to undo where you are having children span more than the amount of columns defined in the template , as well as where you give grid-column start 3 or 4 because then grid says well I need at least 4 columns because div4 needs to start on column 4. Having to undo all of this in media queries is irritating which is why I prefer to use grid areas and then redefine the areas in the query , instead of having to revert all the grid columns or grid column start on all the children.

.grid {
display: grid; 
grid-template-areas: 
‘One one two two two three’
‘Four four four four four three’; 

& .div-1 {grid-area: one}
& .div-2 {grid-area: two}
/* etc*/

@media (max-width :400px) {
grid-template-areas: 
‘One one’
‘Two three’
‘Four four’; 
}

}

.grid {
display: grid; 
grid-template-areas: 
‘One one two two two three’
‘Four four four four four three’; 

& .div-1 {grid-area: one}
& .div-2 {grid-area: two}
/* etc*/

@media (max-width :400px) {
grid-template-areas: 
‘One one’
‘Two three’
‘Four four’; 
}

}

clevermissfox•2w ago

https://youtu.be/duH4DLq5yoo?si=_Vus5J7pGOwMH1o0

Kevin Powell

YouTube

Why CSS grid-area is the best property for laying out content

CSS Grid is amazing, and grid-area just make it so much better. When grid first launched I loved the idea of grid areas, but didn't get fully on board as it seemed like a little too much work... but once you start actually using them on a regular basis, you realize that while the initial setup in slightly longer, in the long run you can save a b...

clevermissfox•2w ago

You can do the same thing with named grid lines too but grid-template-areas are a good place to start if you don’t need overlapping content Actually @Chris wasn’t there an example you posted recently just using template-areas and it was allowing overlapping content? I can’t find the thread

Chris Bolson•2w ago

https://discord.com/channels/436251713830125568/1285744237136052304

Chris Bolson•2w ago

As clevermissfox has said, if you tell an element to span 3 columns, the grid will automatically add these columns even if you haven’t defined enough. These are known as implicit as the automatically created. The same thing will happen with rows. So, if you want to swap from having (eg) 4 columns on large viewports to having 2 columns on smaller viewports, not only will you need to update the grid-template-columns but also reduce assign the columns span for any item which has a span of more than 2 defined., otherwise the grid will add them automatically. Again, as clevermiss fox has said, this can be made easier if you use grid areas or grid lines. By doing this you only need to change the parent container area assignations and not worry about changing the column or row span of each individual item. I actually did a demo for somebody a few days ago using grid areas which is not un similar to what you are doing so it might be of some help. Note, in this case they also wanted a fairly radical change of the ordering depending on the viewports size. The great thing is that with grid areas this is simple to do. https://codepen.io/cbolson/pen/eYqNpON

Chris Bolson

CodePen

[demo] Bento grid using grid areas for responsive postitioning.

...

clevermissfox•2w ago

here is a codepen with your project and some refactoring on the grid https://codepen.io/Miss-Fox/pen/QWeEzVX?editors=1100

CleverMissFox-GAcct

CodePen

Discord- Grid Areas

...

Code-S ♛•2w ago

Thank you guys so much for the help! I really appreciate it and the clarification. I have a few questions though. As you guys are using SASS, which I don't understand, you use :root to assign values. But how do you guys remember the values and names? Do you just go up and down the page to look it up? Another question: This is my first page I ever made with Grid. Grid seems to be my weak point (I am weak at everything). Should I always make Grid with grid areas, as they are useful with responsiveness? Also, what does the & symbol do in SASS? What were the common mistakes you guys saw on my page? Was I using too many classes?

Code-S ♛•2w ago

https://codepen.io/saad-shehzad-the-bashful/pen/ZEgOMmQ

saad shehzad

CodePen

Untitled

...

Code-S ♛•2w ago

Another problem I encountered was that, weirdly, some styles weren't being applied. For example, on div6, the font size wasn't decreasing on the 25 rem screen size.

Chris Bolson•2w ago

I personally don't use SASS. Other than basic colors etc I tend to initially hard-code the values and, once I have things working, replace them with custom properties based on if they are repeated or if they would be useful to fine-tune things without searching through the code.

Another question: This is my first page I ever made with Grid. Grid seems to be my weak point (I am weak at everything). Should I always make Grid with grid areas, as they are useful with responsiveness?

Not necessarily. This particular design was quite complex, not least so due to the fact that you need to re-order elements based on the viewport size and also the fact that there are a lot of them. However if the grid just consists of a few columns and rows that have a more natural flow (eg. the columns wrap to new rows on smaller viewports, it isn't necessary to use grid areas or lines.

Also, what does the & symbol do in SASS?

The & is used in nesting, both in SASS and, more recently, in pure CSS. It is used to tell the browser that this is a nested selector (actually I think that it is now optional) "nesting" is when you add a child element or selector "within" a main selector rather than creating a complete new selector for it. I think that in SASS it has more uses but, in the examples that you have seen here, it has been used in pure CSS. For example you might have a link element <a> which has a color and, on hover it changes the color. With "normal" CSS you might do this:

a{
  color: blue;
}
a:hover{
  color: red;
}

a{
  color: blue;
}
a:hover{
  color: red;
}

With nesting you would do this:

a{
  color: blue;
  &:hover{
    color: red;
  }
}

a{
  color: blue;
  &:hover{
    color: red;
  }
}

As you can see, the nested selector is within the main "a" selector so it will only be applied to those elements. It is also quite common to use with pseudo (eg. ::before & ::after) elements.

h1{
  position: relative;
}
h1::before{
  content: '- ';
}

h1{
  position: relative;
}
h1::before{
  content: '- ';
}

would be nested like this:

h1{
  position: relative;
  &::before{
    content: '- ';
  }
}

h1{
  position: relative;
  &::before{
    content: '- ';
  }
}

It can also be used for child selectors however you have to be careful as to how many levels you go as it can get complicated. (I will add that I personally am not a fan of nesting as I find that it makes reading the code harder to follow as you have to contintually scroll up to see what the nested selector is a child of. I tend to limit its use to pseudo elements and selectors.) As regards your code, it isn't actually too bad. You haven't gone overboard with the classes which is something that some people do and over complicates things. That said, I would make a couple of observations (but only because you asked 😉 ) - You should only have a one <main> tag on the page. I would probably make each of your blocks a "section" or possibly even an "article" and then use a "div" as the child element where required. - Seeing as your blocks seem to have quite defined content (social, calendar, audience etc.) it might make it easier for you to assign each block a related classname and also use this for the grid areas assignation. This might make it easier to follow, especially if you come back to it later. - Most of your blocks have display: flex; you might consider either creating a utility class for this or, directly give that class to all of the children of the container:

.container > div{
  display: flex;
}

.container > div{
  display: flex;
}

No real advantage other than to reduce code

Code-S ♛•2w ago

tysm chris

Chris Bolson•2w ago

To combine a few of my suggestions I might do one of the blocks like this (eg calendar):

<section class="box-calendar">
  <div>
    <p>Mantain a consistent posting schedule</p>
    <img src="assets\images\illustration-consistent-schedule.webp" alt="a calender image">
  </div>
</section>

<section class="box-calendar">
  <div>
    <p>Mantain a consistent posting schedule</p>
    <img src="assets\images\illustration-consistent-schedule.webp" alt="a calender image">
  </div>
</section>

display: grid;
    grid-template-areas:
        'social  calendar   audience'
        ...
    ;
  ...
}
.container > section{
  display: flex;
}

...

.box-calendar{
  grid-area: calendar;
}
.box-calendar p{
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: -2px;
}
.box-calendar img{
   margin-bottom: -2rem;
}

display: grid;
    grid-template-areas:
        'social  calendar   audience'
        ...
    ;
  ...
}
.container > section{
  display: flex;
}

...

.box-calendar{
  grid-area: calendar;
}
.box-calendar p{
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: -2px;
}
.box-calendar img{
   margin-bottom: -2rem;
}

* Bear in mind that not everybody likes using child selectors like this so you will get different opinions Ah, one more thing... your mentioned "root values". I presume you are referring to the CSS variables, or better known as "custom properties". These tend to be defined on the root as they this makes them "global", ie available to all of the children elements of the root. The custom properties defined on the root tend to be ones that will be used throughout the code such as colors, font sizes, padding etc. However you can actually define custom properties wherever you like. The important thing to remember is that, much like variable scope in JS (if you have come across this) they are only available within the element defined and its children. This means that you can scope your values to be set just for that element (note - JS variable scope is a bit more complex than this). Here is an example that I hope will explain it better:

:root{
  --my-color: red;
}
h1,p{
  /* assign custom property color to h1 and all p elements */
  color: var(--my-color);
}
section.my-box{
  /* overwrite the --my-color value ONLY for this element and it's children */
  --my-color: blue;
}

:root{
  --my-color: red;
}
h1,p{
  /* assign custom property color to h1 and all p elements */
  color: var(--my-color);
}
section.my-box{
  /* overwrite the --my-color value ONLY for this element and it's children */
  --my-color: blue;
}

<h1>Hello world (red)</h1>
<section>
  <p>This should be red</p>
</section>
<section class="my-box">
  <p>This should be blue</p>
</section>
<p>This should be red</p>

<h1>Hello world (red)</h1>
<section>
  <p>This should be red</p>
</section>
<section class="my-box">
  <p>This should be blue</p>
</section>
<p>This should be red</p>

i_lost_to_loba_kreygasm•2w ago

I never liked grid areas

Code-S ♛•2w ago

thanks~4

clevermissfox•2w ago

I didn’t use sass either , you’re likely referring to CSS nesting with the & symbol. I wrote some notes on the stylesheet of my codepen for you but the main thing I noticed was that you were using classes as IDs and not giving common styles the same class. Also your text needs some kind of framework. There were very few classes that had the same font size and there was no rhyme or reason why. If you wanted to update in the future you would have to go through nearly every single selector and update the font size. As far as the css custom property names in the :root , you develop a system after awhile but in most code editors (not codepen) , once you type “—“ it gives you an autocomplete drop-down of all your custom properties that you’ve defined. Grid-areas are a good place to start with grid and as you see make it easy to redefine the grid on other screen sizes instead of having to override grid-row-start, grid-column-start, etc. you can also look into Named Grid Lines which do a similar thing but is more flexible. I think Chris has gone into more detail on most of your questions but if you take a look at my refactor and have any more questions lmk

Gaming

Programming

Grid acting weird