Forums

Give help. Get help.

  • # December 4, 2017 at 9:51 pm

    Hey guys, I am interesting in creating a grid layout for my personal portfolio and have been having some immense trouble adding images and text into the grid boxes. To show a pretty much similar thing that I want here is a site with a grid and image layout I desire:

    Portfolio

    If there’s not a way to do this with pure HTML and CSS that’s okay, I just have no clue even where to begin to get images fixed inside each box. It’d help a lot if I could get some direction. Thank you all!

    # December 4, 2017 at 11:05 pm

    have been having some immense trouble adding images and text into the grid boxes.

    If you show us the problem, and your code, in a reduced CodePen, we should be able to offer suggestions.

    As for the link you’ve posted, you can use the dev console to inspect it – F12 in most browsers. I’m on mobile but it looks like there’s JavaScript at play. Maybe try researching “masonry layouts”?

    # December 5, 2017 at 1:36 pm

    Here is my code in a codePen, my problem is fitting images exactly into the grid boxes and enabling a hover on the grid boxes likle the example I showed. Thanks for the reponse!

    # December 7, 2017 at 12:32 am

    The effect you see in your example page uses this: https://masonry.desandro.com/
    But you can look for examples done with just CSS.
    A quick search results in these for example: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb and http://w3bits.com/css-masonry/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag