ACSS 101.16 - Content Grid (Basics)

Поділитися
Вставка
  • Опубліковано 16 січ 2025

КОМЕНТАРІ • 33

  • @twan.peeters
    @twan.peeters 3 місяці тому +1

    Kevin, thanks for making all of these, and the entire ACSS, Frames and Etch team supporting you. ❤ It's thanks to your videos that I went in couple of months from a Gutenberg page builder designer to fully being able to style CSS, understand and inspect html and find my way around designing anything in Figma and then having the confidence to translate it to top-class websites. I just watched the entire ACSS 101 playlist on double speed - my head is melting but I'm so excited to play around and apply all of these tricks on my upcoming site! You are a great teacher.

  • @jeremiahhundley6629
    @jeremiahhundley6629 2 місяці тому

    Just binged your videos for the last 2 weeks, all of Page Builder 101, and now about to finish ACSS 101. There is SOOOO much info. I began this journey (a serious newbie) that needed to create a handful of sites. Now that I am almost through. I'm interested to see how I will put it all together in my various projects.
    I chose ACSS because of all the incredible tutorials you created over the last two years. This is by far, the most tutorial based work flow I have found. And I really needed it.
    I still have a few videos to go. But I just wanted to say, thank you.

  • @Neoxphuse
    @Neoxphuse 3 місяці тому

    Another great tutorial. Making life a little more efficient. Thanks for the simple explanations.

  • @ALIMAHMA
    @ALIMAHMA 3 місяці тому

    Another great tutorial, Thanks for sharing

  • @rafidiul-albani4590
    @rafidiul-albani4590 3 місяці тому

    Great work.

  • @grasshopperweb
    @grasshopperweb 3 місяці тому +1

    Very curious about the follow-up. I've really enjoyed using content-grid ever since you showed it in action a little while back.

  • @AthloneH
    @AthloneH 3 місяці тому

    So useful even when writing blog posts to get e.g. embeds like YT videos or images to be highlighted.

  • @DavidWhiteGives
    @DavidWhiteGives 3 місяці тому

    Loving me some content grid. Hoping the zones don’t lead to fines lol. I thought this might be a joke. Now I am thinking of a specific issue that only I know I have that this will fix, so yeah, wow. Thanks Kevin very useful.

  • @rolandoveca
    @rolandoveca 3 місяці тому

    This is exactly what I need, I still have doubts about whether or not to buy ACSS because there is almost no content on how to use or configure it and I am afraid of the learning curve and that in the long run it will slow down my website development process, please make more tutorials so I can make a better decision.

    • @AutomaticCSS
      @AutomaticCSS  3 місяці тому +5

      There are hundreds of hours of videos available including an official 101 course. I’m confused when you say there aren’t enough tutorials.

    • @rolandoveca
      @rolandoveca 3 місяці тому

      @@AutomaticCSS Hello, greetings, where are the courses? Can you give me the link please?

    • @JacobBall75
      @JacobBall75 3 місяці тому +2

      @@rolandovecaIf you look at the videos for this channel, you’ll see a bunch that relate to the current ACSS version, along with stacks of others. If you search for Kevin Geary’s name, you’ll find his other channel that has a series called PB101 (Page Building 101) that you’ll find tremendously helpful in a general sense but also how ACSS fits in. It’s also got dozens of other videos that can help. Not only that, the docs on the ACSS website will help a lot too.
      Don’t stress too much about the learning curve, as you can build on your knowledge of how to use it as you get more confident with it and discover more ways it can help. Start off slow, set your colour palette, build some sections, use some utility classes, it will all start coming together.
      In the long run, it will save you HOURS of development time. Trust me on this 👍

    • @nasmith67
      @nasmith67 3 місяці тому +1

      If you look at recommended videos under/beside this video, you will see plenty of ACSS 101.xx related content. Also you can go to the link on the bottom of the ACSS website. It is also shown when Kevin is visiting the website in this video.

    • @sean-gs
      @sean-gs 3 місяці тому +2

      I think Kevin is the one making the most courses in the Bricks community, so if this concern you don't be. I don't think there is anyone else in this community making as many useful videos as him.

  • @thorsten-roever
    @thorsten-roever 3 місяці тому

    Thanks

  • @topp342
    @topp342 3 місяці тому

    Very handy.

  • @SteveLaw78
    @SteveLaw78 3 місяці тому +1

    When you first introduced the content grid a while back, you mentioned that once ACSS 3.0 came out, we could add content grid to custom classes. Is that possible now, or do we still require the utility class on the parent?

    • @AutomaticCSS
      @AutomaticCSS  3 місяці тому +2

      Still requires utility class right now. Or you can make it the default for sections. I’ll look into making a recipe for it

  • @akivamajowka5742
    @akivamajowka5742 Місяць тому

    Hi Kevin, this is fantastic and insanely useful, thanks for the tutorial! Im using the content grid to make the classic hero text left and image all way right, but im just having problems trying to make it responsive in the lower breakpoints and stack the layout and make the image full screen right to left, can u give directions on how to approach this? also in the same context of the content grid, if im using an absolute header within the hero how can i use the "Offset Content Automatically" without destroying the layout ,thanks again!!

    • @AutomaticCSS
      @AutomaticCSS  24 дні тому

      Probably best to ask in the community. We need to see an example

  • @Simon-sly
    @Simon-sly 3 місяці тому +1

    Daymn! That is stupidly good. So good that I think I would like content-grid to be applied to sections by default! Is that possible?

    • @Gearyco
      @Gearyco 3 місяці тому +3

      Yes, there's an option for it in the content grid dashboard. If you're a Frames user, some frames will need some adjustment when using content grid by default, so just a heads up.

  • @krissborowy3627
    @krissborowy3627 2 місяці тому

    Thanks for another tutorial material.
    I have regarding the use of Content Grid one question.
    Is it possible to apply it in Gutenberg and Bricks at the same time.
    I am generally designing the site in Bricks, but the posts will be written in the Gutenberg editor. I would like the content to have, for example, 800px while the added images inside the text have 1000-1200px.
    If I add a section in the Bricks template, which has a default width and padding set by ACSS. If I add a photo then its width will be the same as the width of the section.
    Adding the block “Post Content” in brick all the content also has the width of this section in the created Bricks template.
    I hope you understand me? What I mean?
    I will be grateful for your help.
    THX Kriss

    • @AutomaticCSS
      @AutomaticCSS  2 місяці тому

      It’s not possible since content grid requires a utility class and Gutenberg doesn’t have a main container element that you can access.

  • @quazimohammadfaisal8462
    @quazimohammadfaisal8462 3 місяці тому

    'content-grid' is a godsend! However, one problem I see is that the flex-grow property does not work for the containers inside section. Any workaround for that?

    • @AutomaticCSS
      @AutomaticCSS  3 місяці тому

      For what reason is that needed?

    • @quazimohammadfaisal8462
      @quazimohammadfaisal8462 3 місяці тому

      See if this makes sense:
      section (fullscreen height with 100dvh. content-grid enabled)
      - container_1 (nav bar with feature-max width. 300px max height)
      - container_2 (flex-grow: 1 . Need the container to occupy the remaining viewport height)
      But once content-grid is enabled in section, flex-grow does not work anymore on container_2.

  • @reggiewaysama
    @reggiewaysama 3 місяці тому

    When will be the part 2?

    • @AutomaticCSS
      @AutomaticCSS  3 місяці тому +2

      When it’s recorded and edited

    • @reggiewaysama
      @reggiewaysama 3 місяці тому

      @@AutomaticCSS Thanks, looking forward to use it on our upcoming website build.