3

I am trying to make something like a gallery, take a look for this grid system from materializecss themes:

https://themes.materializecss.com/pages/demo

-I want to make 3 Columns all the same width so: grid-template-columns: repeat(3, 1fr); -and a gap between the columns so: column-gap: 1em;

and I have a divs inside, I want to make the div take it's own height and NOT to make all of the divs has the same height.

enter image description herelook at this:

code:

 <div class="puzzles_grid">


       <!--card1-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/200/100" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

        <!--card2-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/400/400" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

        <!--card3-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/300/700" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

        <!--card4-->

        <div class="theblock">
        <div>
        <img class="puzzles_img" src="https://picsum.photos/700/700" alt="">
        </div>
        <div>
        prices 100$
        </div>
        </div>

    </div>


<style>
    .puzzles_grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1em;
        grid-row-gap: 1em;
    }
    .theblock {
        background-color: #E91E63;
        width: 100%;
    }

</style>
ahamd
  • 31
  • 1
  • Since you have a working example that does what you want, have you looked at the way it works and tried to copy it? – Roope Aug 26 '18 at 13:35
  • I am a beginner friend and learning from asking people how to do things, and not following a tutorial. – ahamd Aug 26 '18 at 14:52
  • Yes, and we are happy to help, but I am merely pointing you towards an existing example that you can utilize to achieve your goal. You have the code available for the layout you wish to create. Thus, you should try to utilize that. You can use your browser's developer tools to see the front-end code for any web page. – Roope Aug 26 '18 at 15:18

0 Answers0