Sagar Sinha
Reputation: 415
CSS based grid misalignment issue
Below is my code for grid. My goal was to make a simple and configurable grid using css. But the grid breaks or misaligned sometimes, you can see the attached images for reference. I don't know whether i am missing something in the code.
.grid {
width: 100%;
max-width: 1080px;
margin: 0 auto;
}
.row {
width: 100%;
margin: 0 auto;
}
.grid:before,
.grid:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.grid:after,
.row:after {
clear: both;
}
[class*='col-'] {
width: 100%;
float: left;
min-height: 1px;
}
.col {
margin: 0 10px;
}
@media screen and (min-width: 320px) {
.col-sm-1 {width: 8.33333%;}
.col-sm-2 {width: 16.66667%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33333%;}
.col-sm-5 {width: 41.66667%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33333%;}
.col-sm-8 {width: 66.66667%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33333%;}
.col-sm-11 {width: 91.66667%;}
.col-sm-12 {width: 100%;}
}
@media screen and (min-width: 640px) {
.col-md-1 {width: 8.33333%;}
.col-md-2 {width: 16.66667%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.33333%;}
.col-md-5 {width: 41.66667%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.33333%;}
.col-md-8 {width: 66.66667%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.33333%;}
.col-md-11 {width: 91.66667%;}
.col-md-12 {width: 100%;}
}
@media screen and (min-width: 960px) {
.col-lg-1 {width: 8.33333%;}
.col-lg-2 {width: 16.66667%;}
.col-lg-3 {width: 25%;}
.col-lg-4 {width: 33.33333%;}
.col-lg-5 {width: 41.66667%;}
.col-lg-6 {width: 50%;}
.col-lg-7 {width: 58.33333%;}
.col-lg-8 {width: 66.66667%;}
.col-lg-9 {width: 75%;}
.col-lg-10 {width: 83.33333%;}
.col-lg-11 {width: 91.66667%;}
.col-lg-12 {width: 100%;}
Below is the HTML, data is getting loaded dynamically
<div class="menu-container grid m-t-20" id="up_menu_container" style="padding-top: 47px;">
<div class="row up-column-3 up-item-container" data-category="686">
<div data-id="14603" class=" item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="mint_oreo_crumble">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Mint-Oreo-Crumble_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type veg"></div>
</div>
<div class="div-table-cell item-title-cell">
Mint Oreo Crumble
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14603">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14608" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="butterscotch">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Butterscotch_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Butterscotch
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14608">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14998" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="pineapple">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="images/icon/broken.png" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Pineapple
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
₹ 150<span class="price-descriptor"></span>
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14998">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14607" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="strawberry">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Strawberry_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Strawberry
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14607">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14609" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="vanilla">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Vanilla_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Vanilla
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14609">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14610" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="cold_coffee">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Cold-Coffee_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Cold Coffee
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14610">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Upvotes: 1
Views: 359
Answers (1)
Michael Coker
Reputation: 53664
Add img { max-width: 100%; } to keep the images from exceeding the width of the parent, and add .row { display: flex; flex-wrap: wrap; } so that uneven height items of the grid rows won't cause the rows to stagger.
img {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.grid {
width: 100%;
max-width: 1080px;
margin: 0 auto;
}
.row {
width: 100%;
margin: 0 auto;
}
.grid:before,
.grid:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.grid:after,
.row:after {
clear: both;
}
[class*='col-'] {
width: 100%;
float: left;
min-height: 1px;
}
.col {
margin: 0 10px;
}
@media screen and (min-width: 320px) {
.col-sm-1 {
width: 8.33333%;
}
.col-sm-2 {
width: 16.66667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333%;
}
.col-sm-5 {
width: 41.66667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333%;
}
.col-sm-8 {
width: 66.66667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333%;
}
.col-sm-11 {
width: 91.66667%;
}
.col-sm-12 {
width: 100%;
}
}
@media screen and (min-width: 640px) {
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
}
@media screen and (min-width: 960px) {
.col-lg-1 {
width: 8.33333%;
}
.col-lg-2 {
width: 16.66667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333%;
}
.col-lg-5 {
width: 41.66667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333%;
}
.col-lg-8 {
width: 66.66667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333%;
}
.col-lg-11 {
width: 91.66667%;
}
.col-lg-12 {
width: 100%;
}<div class="menu-container grid m-t-20" id="up_menu_container" style="padding-top: 47px;">
<div class="row up-column-3 up-item-container" data-category="686">
<div data-id="14603" class=" item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="mint_oreo_crumble">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Mint-Oreo-Crumble_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type veg"></div>
</div>
<div class="div-table-cell item-title-cell">
Mint Oreo Crumble
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14603">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14608" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="butterscotch">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Butterscotch_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Butterscotch
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14608">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14998" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="pineapple">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Strawberry_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Pineapple
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
₹ 150<span class="price-descriptor"></span>
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14998">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14607" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="strawberry">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Strawberry_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Strawberry
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14607">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14609" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="vanilla">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Vanilla_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Vanilla
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14609">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-id="14610" class=" hide-food-type item in-stock ordering-item relative-pos col-sm-12 col-md-6 col-lg-4" data-title="cold_coffee">
<div class="col relative-pos">
<div class="up-item-image loaded">
<img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Cold-Coffee_COMPRESSED.jpg" class="content">
</div>
<div class="up-item-others">
<div class="title-desc-container">
<div class="title relative-pos div-table">
<div class="div-table-cell food-type-cell">
<div class="food-type no-type"></div>
</div>
<div class="div-table-cell item-title-cell">
Cold Coffee
</div>
</div>
<div class="item-desc small-text m-t-10 m-b-10">
<div></div>
</div>
</div>
<div>
<div class="item-pricing-btn-cnt">
<div class="bold item-price-text">
</div>
<div class="item-controller relative-pos top-inline-container" data-id="14610">
<div class="out-of-stock-text up-button small default secondary">
Out of stock
</div>
<div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
Add
</div>
<div class="m-l-10 added-item-add-delete">
<div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
<i class="fa fa-caret-down"></i>
</div>
<div class="counter cart-button-toggle noselect">
</div>
<div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
<i class="fa fa-caret-up"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- CSS grid elements not aligned properly
- Alignment issue with CSS Grid
- Grid Layout failing to align
- HTML Grid Layout not in accordance to CSS
- Align CSS grid elements
- Grid columns and rows failing to align properly
- Css grid layout issues
- Aligning grid columns
- Column misalignment in grid
- Grid elements do not align properly