search

sitetent / tentcss

:herb: A CSS survival kit. Includes only the essentials to make camp.
http://css.sitetent.com/
MIT License
406 stars 31 forks source link

Equal height #27

Closed protasisimone closed 7 years ago

protasisimone commented 7 years ago

Hi, it's possible equal height for grid__columns and card?

ulinaaron commented 7 years ago

Yeah, I may not have this documented as well as it should be. I'll get something added about this soon!

The easiest method is to add the .height-full class to each card you'd like to have equal heights. This is only adding height: 100%; to the .cards.

Here is an example:

<div class="grid">
    <div class="grid__column">
        <div class="card height-full">
            <img src="//placehold.it/600x300?text=Image">
            <div class="card__content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
            </div>
        </div>
    </div>
    <div class="grid__column">
        <div class="card height-full">
            <img src="//placehold.it/600x300?text=Image">
            <div class="card__content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Incidunt, laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum. Lorem
                ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum. Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Incidunt, laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt,
                laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum. Lorem ipsum dolor sit
                amet, consectetur adipisicing elit. Incidunt, laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Incidunt, laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
            </div>
        </div>
    </div>
</div>

Hope that helps!

protasisimone commented 7 years ago

Thanks for ur fast reply. I wanna leave a suggest for this framework: To create grid and card elements you get a lot of code, it would be helpful to decrease it. I hope you can welcome this tip somehow and thank you again for the answer.

Have a good day

ulinaaron commented 7 years ago

Thank you for the suggestion! I realize the grid and card combination together does generate quite a bit of markup. In the future I may look into just using the cards as the grid itself.