آموزش پروژه محور لایه بندی گرید در سی اس اس
در جلسات قبلی با بخشهای مختلف ساختار لایه بندی گرید در Css آشنا شدیم و یادگرفتیم که یک لایه گرید چگونه شکل می گیرد.در این پست می خواهیم به صورت آموزش پروژه محور با نحوه ساخت یک لایه گرید آشنا شویم.
قدم اول:ساخت لایه ساده HTML
در شروع هر پروژه وب ابتدا باید یک لایه ساده با استفاده از HTML ایجاد کنیم،در این فایل اسکلت اولیه لایه گرید را تشکیل می دهیم و سپس با استفاده از Css به ظاهر و بخش های مختلف اسکلت استایل اعمال می کنیم.(در طول دوره HTML5 با تمامی بخشهای ساختار یک صفحه وب آشنا شدهایم).
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3 CSS Grid Projects(در قالب منوی غذا)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <section class="container"> <div class="main1"> <h1>منوی پیشنهادی سرآشپز</h1> <section class="cards"> <div class="card1"> <h2>نمایش لیست تمامی غذاها</h2> <p>برای نمایش لیست تمامی غذاها موجود در منو میتواند از لینک زیر استفاده کنید</p> <button>لیست غذاها</button> </div> <div class="card card2"> <div class="card-info"> <span class="name">خوراک مرغ</span> <span class="price">$6</span> </div> </div> <div class="card card3"> <div class="card-info"> <span class="name">خوراک گوشت</span> <span class="price">$8</span> </div> </div> <div class="card card4"> <div class="card-info"> <span class="name">خوراک ماهی</span> <span class="price">$9</span> </div> </div> <div class="card card5"> <div class="card-info"> <span class="name">سوشی</span> <span class="price">$12</span> </div> </div> </section> </div> <div class="main2"> <article class="article1"> <h3>تخصص اصلی ما</h3> <p>سرو تمامی غذاهای ایرانی،چینی،هندی،فرانسوی،فست فودها،پیتزاهای مخصوص و نوشیدنی های متنوع.</p> <button>اطلاعات بیشتر</button> </article> <div class="article-image"></div> </div> </section> </body> </html>
بررسی المنتهای استفاده شده در کدهای بالا:
المنت section:از عنصر <section> برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می شود.در کدهای بالا ما از المنت section برای ایجاد بخشهای مجزا هر لایه گرید استفاده می کنیم.
مطلب مرتبط:لیست اموزش های گرید در Css
المنت div:تگ <div> معرف یک دسته بندی یا یک بخش در یک HTML است. این تگ برای گروه بندی عناصر بلوک برای شکل گیری از طریق css در طراحی سایت استفاده می شود. در واقع تگ <div> در در طراحی سایت کاربرد فراوانی دارد. این تگ تا حد زیادی جایگزین تگ <table> در Html 4 است. ما در کدهای بالا از تگ Div برای دسته بندی کارت های نمایشی استفاده کرده ایم.
المنت article:تگ <article> محتوایی مستقل و جامع را مشخص می کند. یک Article باید به تنهایی دارای معنا و مفهوم باشد و بتوان آن را مستقل از سایر اجزای سایت در مکان های مختلف ارائه داد.در کدهای بالا ما از تگ Article برای نمایش اطلاعات استفاده کردیم.
قدم دوم:استایل دهی به عناصر با Css
در ادامه برای ساخت یک لایه گرید نیاز داریم که یک فایل Css ایجاد میکنیم و به تگ ها و المنتهای مختلف استایل اعمال می کنیم.بخشهای که در فایل Css زیر مشاهده می کنیم به صورت کامل هم در دوره ویدئویی و آنلاین Css و Css3 و همچنین در طول آموزش گرید آشنا شدیم.
* { box-sizing: border-box; } body { background-color: #272f32; color: #555; font-family: tahoma; font-size: 20px; margin: 0; padding: 0; } h1,h2,h3 { font-family: tahoma; } h1 { font-size: 30px; padding-top: 20px; margin-bottom: 0; } button { background-color: #fff; border: none; border-radius: 4px; padding: 10px 20px; color: #9dbdc6; font-weight: bold; } .container { background-color: #eee; text-align: center; width: 640px; margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; } .main2 { background-color: #f9f9f9; padding: 40px; } .main2 button { background-color: #9dbdc6; color: #fff; } .main2 .article-image { background: url('http://lorempixel.com/400/400/food/5') top center no-repeat; border-radius: 4px; } .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(2, 200px); grid-gap: 20px; padding: 40px; } .card { background-color: white; border-radius: 4px; } .card1 { grid-column-end: span 2; padding: 10px; background-color: #3f51b5; color: #fff; border-radius: 4px; font-size: 14px; box-shadow: 2px 3px 8px #888888; } .card1 h2 { margin-top: 10px; font-size: 24px; font-weight: normal; } .card2 { background: url('http://lorempixel.com/400/200/food/1') top center no-repeat; box-shadow: 2px 3px 8px #888888; } .card3 { background: url('http://lorempixel.com/400/200/food/2') top center no-repeat; box-shadow: 2px 3px 8px #888888; } .card4 { background: url('http://lorempixel.com/400/200/food/3') top center no-repeat; box-shadow: 2px 3px 8px #888888; } .card5 { background: url('http://lorempixel.com/400/200/food/4') top center no-repeat; box-shadow: 2px 3px 8px #888888; } .card-info { background-color: #fff; padding: 10px; width: 100%; } .card-info .price { color: #ff3d2e; font-weight: bold; font-size: 24px; }
در کدهای بالا اگر با Css آشنا باشید،متوجه نحوه استایل دهی به عناصر خواهید شد.ما برای هرکدام از card ها یک تصویر برای نمایش و همچنین از box-shadow برای اعمال سایه به باکس ها یا کارت ها استفاده کردیم.
ویژگی های grid-template-columns و grid-template-rows
با استفاده از این دو ویژگی اندازه ستون ها و ردیف ها را تعیین می کنیم. مقدار دهی به این ویژگی ها بصورت لیستی از مقادیر هست که مقادیر مختلف اندازه هر ترک را مشخص می کند و فاصله بین مقادیر نشان دهنده خطوط گرید می باشد.
ویژگی grid-gap:از طریق این ویژگی می توان دو ویژگی grid-column-gap و grid-row-gap را بصورت مختصر و یکجا نوشت.
ویژگی grid-column-gap و grid-row-gap:با استفاده از این ویژگی ها می توان بین ستون ها و ردیف ها فاصله یا گپ بوجود آورد. که البته این فاصله بین ترک ها و لبه های نگهدارنده بوجود نمی آید. در ضمن به این گپ ها در صفحه آرایی Gutter گفته می شود. مقادیر این ویژگی های می تواند از واحدهای طولی و یا درصد استفاده کند که واحد درصد نمایانگر عرض عنصر نگهدارنده است.
امیدواریم از این آموزش استفاده کرده باشید،با استفاده از صفحه کدپن سایت نیز میتواند به صورت زنده به ویرایش و نمایش گرید ساخته شده بپردازید.
[codepen_embed height=”565″ theme_id=”0″ slug_hash=”rpmwam” default_tab=”css,result” user=”codefriend”]See the Pen آموزش پروژه محور لایه بندی گرید در سی اس اس by CodeFriend(کدفرند) (@codefriend) on CodePen.[/codepen_embed]