below code grid. goal make simple , configurable grid using css. grid breaks or misaligned sometimes, can see attached images reference. don't know whether missing in 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 , (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 , (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 , (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 html, data 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> 
add img { max-width: 100%; } keep images exceeding width of parent, , add .row { display: flex; flex-wrap: wrap; } uneven height items of grid rows won't cause rows 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 , (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 , (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 , (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>
Comments
Post a Comment