Tanong -- CSS GRID

[Wu_Fei]

good day po

gumamit kasi ako ng css GRID sa REACT js po ..

paano po ba yung SA GRID .. yung PAG NAG RESIZE YUNG
NASA TAAS NA CARD ,AANGAT DIN yung nasa baba nya na CARD po ..

tapos pag NAG RESIZE uli yung nsa taas na CARD. BABA naman uli yung nasa BABA NYA na card


salamat po

nag search po kasi ako sa YøùTùbé kaso di ko alam kung ano sesearch ko wala po ako makita

 

[FinestWork]

Paanong taas? 'Yung nasa baba eh magiging katabi niya? O floated 'yung element?

 

[Wu_Fei]

Paanong taas? 'Yung nasa baba eh magiging katabi niya? O floated 'yung element?

dalawa po kasi sila na card .. isa sa taas isa sa baba... ngayon yung CARD 1 na nasa taas is humahaba o lumalaki .. . ngayon pag lumaki sya o nag increase yung height nya syempre yung nasa baba nag CARD uusog pababa.., ngayon pag balik ni CARD 1 na nasa taas sa kanyang original size eh dapat yung CARD 2 na nasa baba is DIDIKIT DIN SA BABA NYA .. eh HINDI PO GANUN nanyayari .. . may malakig gap po sila ...

HINDI KO ALAM Paano way nito sa GRID .. ngayon lang ako nag gamit ng grid

dalawa po kasi sila na card .. isa sa taas isa sa baba... ngayon yung CARD 1 na nasa taas is humahaba o lumalaki .. . ngayon pag lumaki sya o nag increase yung height nya syempre yung nasa baba nag CARD uusog pababa.., ngayon pag balik ni CARD 1 na nasa taas sa kanyang original size eh dapat yung CARD 2 na nasa baba is DIDIKIT DIN SA BABA NYA .. eh HINDI PO GANUN nanyayari .. . may malakig gap po sila ...

HINDI KO ALAM Paano way nito sa GRID .. ngayon lang ako nag gamit ng grid

dapat si orange didikit kay violet pag CLOSE ni violet .. PAG PRESS NG ACTION LUMALAKI KASI SI VIOLET .. pag LUMAKI SYA uusog si orange pababa .. . ngayon PAG NAG CLOSE na o LUMIIT NA SI VIOLET dapat si oRANGE didikit na sa ilalalim ni VIOLET

 

[FinestWork]

Paano mo na-achieve 'yung layout? Baka hindi nawala 'yung style pag nag-collapse 'yung taas kaya ganiyan. Patingin kami ng code mo sir

 

[Hoshi-san]

kung flex box grid gamit mo, pwede mo dalihin siya ng align-items: stretch

 

[Wu_Fei]

Paano mo na-achieve 'yung layout? Baka hindi nawala 'yung style pag nag-collapse 'yung taas kaya ganiyan. Patingin kami ng code mo sir

.cards-container{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px;





.cards1{
background-color: violet;
grid-column: 1/3;

transition: all 0.5s;


}

.cards2{
background-color: orange;
grid-column: 3/4;

height: 200px;


}

.cards3{
background-color: lightcoral;
grid-column: 1/3;
grid-row: 2/3;

}

.cards4{
background-color: cornflowerblue;
}

kung flex box grid gamit mo, pwede mo dalihin siya ng align-items: stretch

hm . check ko nga po . salamat

Paano mo na-achieve 'yung layout? Baka hindi nawala 'yung style pag nag-collapse 'yung taas kaya ganiyan. Patingin kami ng code mo sir

<div className="cards cards1" style={{height: isOpen ? "400px" : "50px"}}>

kung flex box grid gamit mo, pwede mo dalihin siya ng align-items: stretch

di ko ma gets yung stretch ayaw naman po ..salamat po

Paano mo na-achieve 'yung layout? Baka hindi nawala 'yung style pag nag-collapse 'yung taas kaya ganiyan. Patingin kami ng code mo sir

 

[FinestWork]

'Yung height noong orange 'yung nagiging dahilan kung bakit hindi pumapantay 'yung sa baba ng purple card.

By default naka-row lahat 'yan kaya kung gusto mo mawala 'yon gawin mong dalawang column 'yan — isang column para sa purple at red tapos isang colum para sa orange at blue.

 

[Wu_Fei]

'Yung height noong orange 'yung nagiging dahilan kung bakit hindi pumapantay 'yung sa baba ng purple card.

By default naka-row lahat 'yan kaya kung gusto mo mawala 'yon gawin mong dalawang column 'yan — isang column para sa purple at red tapos isang colum para sa orange at blue.

Kaya nga po.. .

Salamat po.. try ku later

'Yung height noong orange 'yung nagiging dahilan kung bakit hindi pumapantay 'yung sa baba ng purple card.

By default naka-row lahat 'yan kaya kung gusto mo mawala 'yon gawin mong dalawang column 'yan — isang column para sa purple at red tapos isang colum para sa orange at blue.

May sample po kau please? Salamat po

'Yung height noong orange 'yung nagiging dahilan kung bakit hindi pumapantay 'yung sa baba ng purple card.

By default naka-row lahat 'yan kaya kung gusto mo mawala 'yon gawin mong dalawang column 'yan — isang column para sa purple at red tapos isang colum para sa orange at blue.

Kaya nga po.. .

Salamat po.. try ku later


May sample po kau please? Salamat po


okay na po nagwa ko po salamat po

 

[FinestWork]

Ito ba?

 

[Wu_Fei]

Ito ba?

hindi ko po alam kung paano po yan . . yung binigay ko lang na code ganun lang po ako mag grid .. sabi ko nga po KAKAGAMIT KO pa lang ng GRID GRID na yan po .. as in parang baby na tinuturuan mag lakad po ako

Ito ba?

paano po yung sinasabi nyu po na gagawa ng dalawang kolum .. .

Ito ba?

ndi po yan .. nagawa ko na po . .nag nested grid po ako pede po pala .. parang div lang din .. salamat po sa ideya