Koicha Posts - Answer Overflow

Koicha

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

Hello, I have tried to google and find YouTube videos, but I cannot find any solutions to my issue. The goal is that I know we could specify using the grid-template-columns with the trick of repeat() and auto-fill to make it automatically responsive:

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
  gap: 1em;
  margin-block: 1em;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
  gap: 1em;
  margin-block: 1em;
}

The issue is that I am not even sure how to resolve it, for example, lets say I want to have 3 columns, then I want to make the grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); work. Also, no media queries involved in here. I am open to other suggestions as well. If using Flexbox is easier, then I am all for it! I hope someone could help me out!

77 replies

KPCKevin Powell - Community

•Created by Koicha on 2/17/2023 in #front-end

What are other solution to use @use in scss for retrieving nested class names?

I know using @import can work, but it is going to be deprecated, so I don't want to use that. Does anyone have any other solution? Example a nested class:

.class-1 {
 // rest of styling...
    .class-a {}

     .class-b{}
}

.class-1 {
 // rest of styling...
    .class-a {}

     .class-b{}
}

I want just to use something like @extend .class-1 once, then I get the .class-1 and all of the included nested class name

3 replies

KPCKevin Powell - Community

•Created by Koicha on 11/25/2022 in #front-end

Trying to get width and height consistent same size

30 replies

KPCKevin Powell - Community

•Created by Koicha on 11/1/2022 in #front-end

Do you guys prefer to use media query min-width or max-width?

I have noticed a lot popular CSS framework such as tailwind, Bootstraps etc. are using min-width for media query when doing some sort of CSS utility class name. Are there any particular reason they are not using max-width?

16 replies

KPCKevin Powell - Community

•Created by Koicha on 10/20/2022 in #front-end

Is it me, or is rem kinda deprecated today?

I just had an experience trying to zoom in using 30px vs 1.875rem. I don't see any differences between those two. Does every browser support the solution that we don't really need to use rem today any longer?

15 replies

KPCKevin Powell - Community

•Created by Koicha on 10/19/2022 in #front-end

How to make child element full width 100% when an parent element already have width 75%?

Are there a trick to make the child element to be an exception to not follow the width from the parent 75%?

12 replies

Gaming

Programming