D4mations.com

Build a Mosaic Portfolio Layout with CSS Grid

[ad_1]
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

d4mer

,
, , , , , , , , , , , , , , ,

32 responses to “Build a Mosaic Portfolio Layout with CSS Grid”

  1. 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. 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. 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.

  6. 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).

  9. 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?

  17. 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).

  20. 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.

  23. 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>

  28. 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. 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 🙂

  32. 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 Reply