Kevin Powell - Community•13mo ago

can someone explain it to me how this is made

    <div className={Css.Specifications}>
        <h3>Specifications</h3>
        <div className={Css.cards}>
            <div className={Css.card}>
                <h3>General Features</h3>
                <div className="features">
                    <div className={Css.feature}>
                        <div className="featureKey">Release Date</div>
                        <div className="featureValue">2022-02-20</div>
                    </div>
                </div>
            </div>
        </div>
      
    </div>

    <div className={Css.Specifications}>
        <h3>Specifications</h3>
        <div className={Css.cards}>
            <div className={Css.card}>
                <h3>General Features</h3>
                <div className="features">
                    <div className={Css.feature}>
                        <div className="featureKey">Release Date</div>
                        <div className="featureValue">2022-02-20</div>
                    </div>
                </div>
            </div>
        </div>
      
    </div>

26 Replies

Anonymous DEVOP•13mo ago

how are they align like that

.Specifications{
    margin: 2rem;
}
.cards{
    margin: 1rem 0;
}
.card{
    box-shadow: 0 0 10px lightgrey;
    min-height: 10rem;
    width: 30rem;
    padding: 1rem;
}
.feature{
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
    border-bottom: 1px solid lightgrey;
    padding: 0.5rem 0;
}

.Specifications{
    margin: 2rem;
}
.cards{
    margin: 1rem 0;
}
.card{
    box-shadow: 0 0 10px lightgrey;
    min-height: 10rem;
    width: 30rem;
    padding: 1rem;
}
.feature{
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
    border-bottom: 1px solid lightgrey;
    padding: 0.5rem 0;
}

Jochem•13mo ago

we're missing the featureKey and featureValue class definitions to say for sure but long story short: display: flex;

Anonymous DEVOP•13mo ago

this is what i have

Anonymous DEVOP•13mo ago

one card is effecting the height of other

Anonymous DEVOP•13mo ago

Jochem•13mo ago

I'm very confused, you were asking how the values are all lining up in the first screenshot

Anonymous DEVOP•13mo ago

yeah i figured that out not i have this problem

Jochem•13mo ago

right

Anonymous DEVOP•13mo ago

sorry

Jochem•13mo ago

answer's the same, display: flex; if you link the site, I can point to the properties

Anonymous DEVOP•13mo ago

how do i fix the issue with the height

Jochem•13mo ago

share your own code in a codepen

Anonymous DEVOP•13mo ago

its in react can we do that?

Jochem•13mo ago

make a minimal example then, or use something else that can run react

Anonymous DEVOP•13mo ago

https://codepen.io/sarosh-afzal/pen/ZEwOxGm?editors=1100

Sarosh

CodePen

ZEwOxGm

...

Jochem•13mo ago

that's the default display: flex; behavior. By default, align-items is set to stretch, which stretches children to the same size in the cross axis if you change align-items to start or center, it'll stop stretching

Anonymous DEVOP•13mo ago

https://codepen.io/sarosh-afzal/pen/ZEwOxGm?editors=1100

Sarosh

CodePen

ZEwOxGm

...

Anonymous DEVOP•13mo ago

now its doing this

Jochem•13mo ago

if you add this to .cards:

  flex-direction: column;
  max-height: 50rem;

  flex-direction: column;
  max-height: 50rem;

and probably set a max-width that would fit two cards max as well, it should tile the way you want it's not ideal though, because if you add too many cards, the layout will break this is called a masonry layout, and there's no simple way to do them yet without resorting to javascript if you know your cards will always be a certain size, you can fake it with this, but if it's an arbitrary number with arbitrary sizes, you'd have to add javascript to recalculate the max-height basically, it's a bad solution, and you should probably just do some research into masonry layouts

Anonymous DEVOP•13mo ago

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_grid_responsive

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

Anonymous DEVOP•13mo ago

i found this i never heard of the properties its using in this example is it old or what

MarkBoots•13mo ago

Css columns, it's been around quite some time, but still relevant and usefull. Commonly used for news articles, but it works also for 'masonry'-like layouts https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Anonymous DEVOP•13mo ago

the one i send is what i need and its not made using grid .

Anonymous DEVOP•13mo ago

how to make it use space how much it needs not more then that

MarkBoots•13mo ago

you could do

.cards {
  column-width: 15rem; /* ideal width */
  column-count: 3; /* max columns */
  column-gap: 1rem; /* space between columns */
}
.card {
  break-inside: avoid; /* to prevent split to next column */
  margin-bottom: 1rem; /*space below a card (gap only works between columns) *
}

.cards {
  column-width: 15rem; /* ideal width */
  column-count: 3; /* max columns */
  column-gap: 1rem; /* space between columns */
}
.card {
  break-inside: avoid; /* to prevent split to next column */
  margin-bottom: 1rem; /*space below a card (gap only works between columns) *
}

but do remember, columns will fill top to bottom, left to right. So the order might not be what you want

Gaming

Programming

can someone explain it to me how this is made