Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
Build a Mosaic Portfolio Layout with CSS Grid | D4mations.com
  • Tuesday , 1 December 2020

Build a Mosaic Portfolio Layout with CSS Grid

Code Canyon
https://i.ytimg.com/vi/plRcoRqLriw/hqdefault.jpg



The CSS Grid is here, and this is my first real look at how to use it. To start with, I wanted to look at how we can make a cool looking layout in the simplest way possible, so all we’re dealing with here is setting up the grid template, and then using spans to get things the size we need.

Once the initial layout is done, I look at how you can add in an image and hover effect, and then I follow that up by looking at how easy it is to add more items to your layout.

Check out the CodePen: https://codepen.io/kevinpowell/pen/mMeJEW

Support me on Patreon: https://www.patreon.com/kevinpowell

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powellom/KevinJPowell

Original source

3d Ocean

Related Posts

32 Comments

  1. WORDGASM
    June 20, 2020 at 19:38

    I've seen tons of coding tutorials from other YouTubers, and I can proudly say, "Hands down, this man is the best coding instructor on youtube!" Take my $$$ I don't care the price at this point. I will be soon joining your paid tutorials. RESPECT

  2. michele tolin
    June 20, 2020 at 19:38

    I do not know if you solved it but the background image is moving vertically due to the background-position setting center inside the hover rule that override the rule by positioning center horizontally and center veritcally so the background is switching between top and center

  3. Martin Katscan
    June 20, 2020 at 19:38

    Not sure if spec has changed since this video, but I noticed (on codepen at least) that if I give the parent of the grid (.main-content in this example) a min-height value, the grid's height:100% has no effect. I have to give the parent an actual height value of 100vh rather than min-height and then it works. Tried in Chrome and Firefox.
    seems grid ignores 100% of 'min-height' value.

  4. Lis Zcgsedt
    June 20, 2020 at 19:38

    I wonder, is there an easy way to maintain a (square) div aspect ratio while keeping things responsive apart from setting the vertical padding? Does grid help in any way?

    Edit: https://css-tricks.com/aspect-ratios-grid-items/ – looks promising.

  5. Camilo Micheletto
    June 20, 2020 at 19:38

    Feels like shit when you have wonderful ideas with css properties that don't animate properly

  6. Tom Collins
    June 20, 2020 at 19:38

    I followed along with the video, but I couldn't get it to work. Some things that are added that change the display in the video (e.g. display: grid; in the css), did absolutely nothing. After more trial and error, I got things to work sort of. I then copied the html/css from codepen directly, and then nothing worked. I would like to know why the provided code from codepen does not work. I am on FF 72.0.1 (64-bit).

  7. Douglas Amoo-Sargon
    June 20, 2020 at 19:38

    excellent tutorial.I love it

  8. جانم شرما
    June 20, 2020 at 19:38

    the .two:hover::before is not working on mine.

  9. Johan Nobel
    June 20, 2020 at 19:38

    The thing I tried to add was a gentle transition whereby the background image increases in size to 120%. I tried various things but could not get it to work. The image just jumps back and forth without paying attention to transition speed.

    .two:hover {

    transition: all ease-in-out 900ms;

    background-size: 130%;

    opacity: 0.5;

    }

    What I am overlooking?

  10. Pratik Kore
    June 20, 2020 at 19:38

    at 8:55 , why does the portfolio-item height change when only the width and not the document's height is changed?

  11. Vespula Vulgaris
    June 20, 2020 at 19:38

    cool swastica.

  12. Aerin
    June 20, 2020 at 19:38

    Hi Kevin, Thank you for your tutorials. They have been helpful to me.

  13. Roman March
    June 20, 2020 at 19:38

    Great as always! How to make permanent content-div's hight-to-width ratio with this method?

  14. John Moelholt
    June 20, 2020 at 19:38

    Tooo much CSS transition and effect … keep focus to the subject about CSS GRID

  15. Aggelos Than
    June 20, 2020 at 19:38

    Is this responsive?

  16. ToB BI
    June 20, 2020 at 19:38

    how can we add images to fit into the box? anyone?

  17. Jens Törnell
    June 20, 2020 at 19:38

    I just discovered a new way create a table with grid and cell lines. Often 1px grid-gap is used combined with a background. The problem with that approach is that you may not always want the same background color as the grid cell line color. One hacky solution to it is to use borders with negative margins. A better and to me new solution is to use grid-gap combined with outline: 1px solid red; on the cells. That separates the grid background from the cell lines. Also not as hacky (no weird side effects like overflows).

  18. Remzy
    June 20, 2020 at 19:38

    I'm 2 years late to this but thank you for making my college textbook look outdated haha this was a much more preferable learning experience

  19. djlogic937
    June 20, 2020 at 19:38

    Any simple fix to make this code compatible with IE? In IE it doesn't show the grid layout as defined and as shown in codepen, it simply makes one column of full width boxes.

  20. FuzzyPumpkin
    June 20, 2020 at 19:38

    Thanks, wanted to use CSS Grid for one of the sites on my portfolio and it's been a bit since I've touched it so the refresher was nice. When I used it before I named areas and then created a template. Kind of prefer that. I have another little page where I'm making a sudoku game where there's a grid within a grid within a grid and the lowest-level grid is throwing everything off when displayed (it is hidden by default with a class and Javascript event to toggle that). Still trying to figure out why.

  21. JDBackstory
    June 20, 2020 at 19:38

    Wow, I understand grid now! Awesome video, Kevin (and great shirt btw!).

  22. Razibur Rahman
    June 20, 2020 at 19:38

    Thanks. Helped a lot. I was looking for something like this

  23. Jarett
    June 20, 2020 at 19:38

    can anyone please please help??

    i have been hammering away at the following piece of code for days now. I've yet to figure out how to align head-login's div to the right edge! i require only the head-login div to move. i wish for no other div to be changed. they are positioned the way i need them.

    ———– SASSyness ———–

    @mixin centered($h: center, $v: center) {
    display: grid;
    justify-content: $h;
    align-items: $v;
    min-width: 100%;
    min-height: 100%;
    }

    .head {
    // head dims: 100% x min content height
    // the borders will be … enhanced.
    border: 1px solid red;
    display: grid;
    grid-template-columns: 1fr min-content 1fr;
    grid-template-rows: min-content;
    column-gap: 3px;

    .head-logo {
    border: 1px solid red;
    width: min-content;
    }

    .head-msgs {
    border: 1px solid red;
    @include centered; // this centers horiz & vert
    }

    .head-login {
    // how the devil do i get this to align to the right edge?
    border: 1px solid red;
    width: min-content;
    }
    }

    ———– HTML ———–

    <div class=head>
    <div class=head-logo>[LOGO]</div>
    <div class=head-msgs>[MSGS]</div>
    <div class=head-login>[LOGIN]</div>
    </div>

  24. Carrie
    June 20, 2020 at 19:38

    Thank you dude. Incredibly helpfull

  25. Michael Michaelov
    June 20, 2020 at 19:38

    I think if you show what the final product is at first it will be clear what it is about! My opinion. Thanks for the video and the useful lesson. Excuse me for bad English!

  26. Ella Blun
    June 20, 2020 at 19:38

    grid-auto-flow: dense;

  27. Anai Dominick
    June 20, 2020 at 19:38

    Hi everyone!! I was trying to replicate this but I don't know why is he using $ on CSS? Can someone explain to me what should I add in order to use $ in CSS? Thanks 🙂

  28. GS Designs
    June 20, 2020 at 19:38

    Thanks for this tutorial, it's super helpful. I am having an issue though and I'm not sure how to fix it, I'm very new to all this. When I put the following into my CSS and save it, it doesn't change anything, and the .medium remains greyed out, any ideas on what I'm doing wrong? Thanks in advance!

    &.medium {
    grid-row: span 2;
    grid-column: span 2;
    }

  29. Eryk Kryszewski
    June 20, 2020 at 19:38

    Hi. Wouldnt it be easier just to name the grid-area for every object and then just in the parent section add grid-template-areas: 'one one two two two'
    'one one two two two'
    'three three two two two' etc etc…? Just asking, cause it was the first thought that came to my mind. It would be much easier to create media queries with it, just change grid-template-columns on the parent's element and then create appropriate grid-template-areas instead of change the value of every single element.
    Btw very nice video 🙂

  30. Jerry Sierra
    June 20, 2020 at 19:38

    Do you have a version of this NOT on SAAS?

  31. inayathkhan mohammed
    June 20, 2020 at 19:38

    Explained very clearly, Awesome Tutorial

  32. MiEZEKATZE
    June 20, 2020 at 19:38

    I was able to build a nice layout for my blog with the help of your video, thanks! my content is being added automatically the further you scroll down the blog, and with a bit of playing around I was able to get it to fill in available spaces without leaving empty gaps despite having different element sizes. your video was a great help in understanding the basics, so again, thank you!

Leave A Comment

You must be logged in to post a comment.