Css Grid Garden

Posted onby admin

Doing a masonry layout with CSS Grid module seems quite an interesting task. I’ve covered creating masonry with CSS columns and Flexbox, but this is going to be different and better.

CSS Grid Garden: Solutions Level 1 Level 2 Level 3 Level 4 Level 5 Level 6 Level 7 Level 8 Level 9 Level 10 Level 11 Level 12 Level 13 Level 14 Level 15 Level 16 Level 17 Level 18 Level 19 Level 20 Level 21 Level 22 Level 23 Level 24 Level 25 Level 26 Level 27 Level 28. CSS Grid Garden Solution. GitHub Gist: instantly share code, notes, and snippets.

What’s so special?

Grid

The only problem in masonry layouts we created before was inability to order items left-to-right.

Good news is this one is going to be a horizontal one, i.e. left-to-right masonry. The most noteworthy thing about this layout is its dependence on CSS Grid layout module. Hence the making is going to be pure CSS.

If it is the first time you hear about CSS Grid Layout, we recommend you start learning the logic behind this new CSS spec playing a game: Grid Garden, where you should grow your carrot garden watering using CSS Grid properties. CSS Grid Garden Solution. GitHub Gist: instantly share code, notes, and snippets. Hi everybody, i do exercise CSS grid on Grid Garden and don’t understand exercise 28. I try doing it but haven’t received this answer. Your garden is looking great. Here you’ve left a 50 pixel path at the bottom of your garden and filled the rest with carrots. Unfortunately, the left 20% of your carrots have been overrun with weeds. Use CSS grid one last time to treat your garden.

In the same vein to our flexbox masonry, a small bit of JS can be added for more practical and hassle-free sizing.

Masonry with CSS Grid Layout: The Concept

Css

CSS Grid layout is unarguably the best way today to create different grid layouts. If you know how it works, you might have already used it for equal-height columns or holy grail layouts.

While experimenting with the grid, I stumbled upon grid-row-end. This property along with grid-auto-rows sets the baseline for our masonry.

Css Grid Garden

I’d like to quickly share the correct usage of CSS grid layout for beginners.

  1. Set display to grid for the container you are targeting
  2. Set the template for rows and columns using the appropriate properties

That’s it. For those who are not very well-aware of CSS Grids, here are some of my favorite resources:

  1. CSS Grid Garden, fun way to learn Grid
  2. Rachel Andrew’s Grid by example is a more in-depth and elaborated source for the same
  3. CSS Grid at MDN is also a great article to begin with

CSS

Resuming the topic, the concept revolves around a grid with automatically assigned columns. This can be done using grid-template-columns property.

Let’s take a look on some code to achieve a grid with some gap between its columns.

Explanation

  1. We need some gap or gutter-space between the rows and columns of our grid, which is perfectly done by grid-gap.
  2. The columns should be flexible and respond properly to the available screen-size. Therefore we harnessed the handy repeat() and minmax() CSS functions. Above template sets columns according to whatever fits best between 200 pixels and a fraction of the grid. Our grid should be filled with such columns automatically.
  3. We have not specified anything explicitly for the rows in the CSS above. In such a case, implicit grid row tracks are created automatically to hold our grid items.

These tracks are sizeable using the grid-auto-rows property. We need to set it because we will use them later to span and size the columns to form a masonry-like effect.

Implicit tracks

Implicit tracks are automatically constructed by the grid itself when no explicit template is added for rows and/or columns.

Each track is basically a sum of the specified grid-gap and the size of the implicit track which is automatic when not specified.

Adding the masonry touch

Now that we have assigned some height to the implicit row tracks, we can make our masonry items span to one, two, or any sensible number of rows we want.

When you set span 2 for grid-row-end, you are telling the grid to make the item take two spans of the implicit row-track size. And this is how it follows with span 3 and so on and so forth.

Here is what we got after implementing the grid-row-end as mentioned above:

Did you noticed the order? It is from left to right, which was missing in our earlier trials. Amazing, isn’t it?

But again, something is lacking in this even now. This masonry isn’t practical at all to do the spanning of tiles accordingly. Imagine 50 different items in your masonry grid, each with different content size. I’m sure you too wouldn’t like setting spans manually for each of those items.

CSS Grid Layout + JavaScript = Perfect Masonry

How much should an item span to create a masonry-like effect?

Normally the grid kinda fixes the height of each item, therefore we need to use grid-row-end property to size the items. And here only, we have to use some JavaScript to calculate the appropriate span-size for each item.

We have seen already that spanning is the product of a number and the size of implicit row-tracks. All we need now is that appropriate number for each item.

I gave the implicit row-track a size zero for the sake of simplicity and sizing. This makes sense, as we already have some grid-gap scaffolding the tracks for us.

Now, in order to get the appropriate span number for a given masonry item, this is my hypothesis:

With G as the row-gap for our grid, R as the size of implicit row-tracks, and H as the height of the content of any given masonry item, the net height (H1) of our masonry item can be given as:

And the net size of each track (T) can be given as:

Now, an appropriate span number (S) for any given masonry item can be calculated using the above equations:

Andy Barefoot experimented with some JavaScript already to achieve a left-to-right masonry. I quickly forked through his code to make it adapt my need.

Calculating appropriate spanning for any given item

Let’s take a look at the function that calculates an appropriate span number for any given cell of our masonry. I’m providing my code as is, with documentation to make it easily understandable.

Applying appropriate spanning to each item

Now we can simply loop through all the masonry items to apply appropriate spanning. That’ll be taken care of with the help resizeMasonryItem() as declared above.

Resizing things when images finish loading

If an item consists of images, its content’s height will be changed once the images are completed loaded. This will result in a messed-up masonry layout.

The below JS function takes care of it and resizes the items one more time after all the images finish loading. I’m using ImagesLoaded to simply things for that matter.

Hooking the function on appropriate events

It’s important to tell the DOM about when to execute all three JavaScript functions we wrote above. Obviously, we want our items to be properly aligned once the window loads. But wait, what about resizing? You do want the grid look good on window-resizing as well.

Finally, we keep our waitForImages() function open to observe the images regardless of any events to occur.

Caveats

Even though the grid looks just perfect in the demonstrations, but it does have some pitfalls.

  1. It’s expensive. Looping through each of the several grid items and setting properties would be pretty expensive on client’s resources.
  2. The masonry won’t be visible if you set the grid-gap to 0. You have to tweak the JS to make the masonry work for smaller grid-gaps.
  3. It breaks down once the browser detects it’s taking too much time to apply settings. You have to keep the grid either short or paginated.

That’s all folks. Adding a preloader to the masonry is on my to-do list, and I’ll update the article as soon as I’m done with it. I have a small update; I just published a small tool to create, customize, demo, and download masonry layouts with a bunch of customization options. It is super helpful for non-coders.

I hope this was worth your time. Share with me your demos, your views, suggestions, and problems around and about the same topic. Do share this ahead if you found the stuff helpful. Cheers!

Random suggestion: Horizontal CSS Navigation Menu

Css grid example
Read further

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.

테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.

기본 예제

아래 예제는 3개의 세로 열 트랙으로 이루어졌으며, 저절로 채워지며 생성되는 가로 행 트랙은 높이가 최소 100픽셀 이상, 콘텐츠 최대치까지 자동으로 늘어나는 구조의 그리드를 보여줍니다. 각 아이템은 그리드 라인을 기준으로 배치되었습니다.

참고

CSS 프로퍼티

CSS 함수

CSS 데이터 타입

용어집 목록

가이드

Css Grid Garden Answers

외부 문서

Css Grid Garden Level 26

  • Grid Garden - A game for learning CSS grid

Cssgridgarden

표준 문서

Css Grid Garden Answers

SpecificationStatusComment
CSS Grid LayoutCandidate RecommendationInitial definition.