HTML CSS examples for CSS Widget:Table Row
CSS - Grid row centering responsive
<html lang="en"> <head> <title>Lorem ipsum dolor sit amet, consectetur adi</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> .grid {<!-- ww w . j av a 2 s . co m--> margin:0 auto; width:991px; font-size:0; } .item { display:inline-block; margin:6px; width:100px; height:100px; background:red; } @media screen and (max-width: 230px) { .grid { width:111px; } } @media screen and (min-width: 231px) and (max-width: 340px) { .grid { width:221px; } } @media screen and (min-width: 341px) and (max-width: 450px) { .grid { width:331px; } } @media screen and (min-width: 451px) and (max-width: 560px) { .grid { width:441px; } } @media screen and (min-width: 561px) and (max-width: 670px) { .grid { width:551px; } } @media screen and (min-width: 671px) and (max-width: 780px) { .grid { width:661px; } } @media screen and (min-width: 781px) and (max-width: 890px) { .grid { width:771px; } } @media screen and (min-width: 891px) and (max-width: 1000px) { .grid { width:881px; } } @media screen and (min-width: 1001px) and (max-width: 1110px) { .grid { width:991px; } } </style> </head> <body translate="no"> <div class="grid"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>