سایت آموزشی فری لرن
اجرا کن
مشاهده خروجی
<!DOCTYPE html> <html> <head> <style> .My-Container{ background-color:#5db616; color:#fff; display: grid; grid-template-rows: auto auto auto auto; grid-gap: 5px; grid-auto-flow: column; } .MyItem{ background-color:#f2f2f2; color:#000; font-size:25px; margin:5px; padding:10px; text-align:center; border: 2px solid #000; } </style> </head> <body> <h2>آیتم ها بصورت ستونی قرار میگیرند</h2> <div class="My-Container"> <div class="MyItem">1</div> <div class="MyItem">2</div> <div class="MyItem">3</div> <div class="MyItem">4</div> <div class="MyItem">5</div> <div class="MyItem">6</div> <div class="MyItem">7</div> <div class="MyItem">8</div> <div class="MyItem">9</div> <div class="MyItem">10</div> <div class="MyItem">11</div> <div class="MyItem">12</div> </div> </body> </html>
اشتراک گذاری
×
کپی آدرس
آدرس با موفقیت کپی شد
