DEV Community

CodeCara
CodeCara

Posted on

Gridlock

(This should have been posted on 8/9/2; this post covers what I’ve done up to 8/9/24 only).

Things I've worked on/completed since my last post...

  • Finished all the theory in CSS Grid, which included…
  • Finished Positioning Grid Elements
  • Advanced Grid Properties (inc. practical exercises)
  • Using Flexbox and Grid

Things that went well...

I tried to teach myself a little bit about Grid prior to starting TOP, but hadn't touched it since then. I enjoyed getting back into it and it was good to delve into the details of it a bit more in the theory section.

Though still no expert, I feel more aware of its capabilites and more confident in terms of being able to to research what I need to achieve a desired result.

Things that didn't go quite so well...

Nothing really. Except that in the last the grid practice exercise, I followed all the dimensions specified buy my layout appeared slightly different to the 'desired outcome', even though it was responding correctly etc.

A fellow Odinite reassured me that this was probably due to my UI being of different size to that on which the desired outcome was designed. Though it makes sense, it's good to get reassurance anyway. This will make me more aware of such 'design discrepancies' in the future.

Things I've learnt/need to improve on...

Understanding how grids can be created within grids, how grids can contain flex containers etc. and the overlap between the two.

How Flexbox is more content-focused in terms of sizing, while Grid is more layout-based.

How Flexbox can be used to create '2D' layouts, which are not really 2D.

I think I developed a better understanding of when grid might be the better choice over flexbox and vice versa. I found Kevin Powell’s video on this particularly helpful.

.

Plan for the forthcoming week...

Start and hopefully finish the Admin Dashboard project, which is the last project in the Intermediate HTML and CSS course.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more