![]() I do have an article that details the technique. That’s no mistake! I purposely spanned them on top of one another so that I can apply a clip-path to cut a portion from each one and get the final result: Yes, the second and third images are overlapped in the middle. When we put it all together, here’s what we get: Same deal for the other grid-area declaration. Grid-column-end: span 2 /* take 2 columns */ …that is the same as writing all this out: grid-row-start: 1 /* 1st row */ If we open DevTools and inspect our declaration: grid-area: 1/2/span 2/span 2 you will get the following: grid-area: 1 / 2 / span 2 / span 2 Grid-auto-rows: 1fr You can also use your favorite DevTools for further proof. …is equivalent to this: grid-template-columns: repeat(3, 1fr) You can see all of them in the Almanac.īut what you really need to know is this: grid: auto-flow 1fr / repeat(3, 1fr) They look strange and are tough to grok! That’s because I chose the CSS grid shorthand property, which is super useful but accepts an unseemly number of values from its constituent properties. You might be wondering what’s going on with those grid and grid-area property values. I have a very detailed article that explores both concepts. ![]() The browser “implicitly” creates them based on the placement of the items. ![]() ![]() Same thing with the number of rows - none of them are explicitly defined. This automatic behavior is a powerful feature of CSS Grid called “auto-placement”. From there, all that’s happening is the second and third images are explicitly placed on the grid, allowing the first and last images to lay out automatically around them. All that we need are images contained in a wrapper element.īasically, this is a square grid with three equal columns. All the examples we’ve seen throughout this series use the exact same HTML markup. Nothing but a few tags in a div wrapper, right? Remember, the main challenge for this series is to work with the smallest amount of HTML possible. Before digging into the CSS, let’s check the markup: ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |