در حال بارگزاری ...

آموزش ایجاد چیدمان چند ستونی با استفاده از CSS

CSS
توسط سميه شفيعي
آخرین به روز رسانی سه شنبه 11 آذر 1399

در این قسمت از آموزش در لیداوب به آموزش چیدمان چند ستونی با استفاده از CSS می‌پردازیم، روشی که در روزنامه‌ها و مجلات مورد استفاده قرار می‌گیرد. به این صورت که قسمت‌های یک متن طولانی را به دو یا چند ستون می‌شکنند، این امر به این دلیل است که یک متن طولانی در یک منطقه معین اجرا شود.

ایجاد چیدمان چند ستونی با CSS

با استفاده از چیدمان چند ستونی در CSS، توسعه دهندگان می‌توانند یک چیدمان ستونی را تنها با کمی طراحی CSS در قسمت متن اعمال کنند. چیدمان چند ستون در CSS به صورت خودکار ریسپانسیو است. بنابراین، اغلب شما در لپ تاپ یا تبلت خود می‌توانید دو یا سه ستون داشته باشید، در حالی که یک دستگاه تلفن همراه ممکن است تنها یک ستون داشته باشد.

افزودن یک افکت ستون به مقاله

ابتدا به نشانه‌گذاری که برای شروع استفاده خواهیم کرد نگاهی می‌اندازیم. کد زیر شامل یک تگ  <article>  با چند عنصر <h2>  و <p>  است که در <article> موجود است.

Html:

<html>



<head>

    <title>CSS Multi-column Layout Tutorial</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>



<body>

<article>

    <h2>Operating Systems</h2>



    <p>Operating systems come in all shapes and sizes. Most of the operating systems in the world are Windows and

        Linux. Windows is a Microsoft production while Linux is open source with companies like Ubuntu, Red Hat,

        and others supporting it.

    </p>



    <p>Better to use some text about operating systems in this section here before moving on to

        application software in the next section. Many web servers run on Ubuntu while office workers often make

        use of Windows operation systems.

    </p>



    <h2>Application Software</h2>

    <p>Application software is another type of software and it runs on top of the operating system. Microsoft

        Office is probably the most used application software in the business world. Adobe are the makers of

        application software for creative types.

    </p>



    <p>Those applications for creativity include things like Adobe Photoshop, Illustrator,

        Dreamweaver, and many others. Still other application software may be software such as customer

        relationship management software that companies may use to track the day to day business.

    </p>

</article>



</body>



</html>

در تصویر زیر چیدمان مقاله ما را قبل از اعمال هر گونه افکت ستونی مشاهده می‌کنید:

آموزش چیدمان چند ستونی با استفاده از CSS

 

 

اکنون چند روش را برای ایجاد چند ستون در طرح مورد استفاده قرار می‌دهیم.

شما می‌توانید با هدف قرار دادن عنصری که می‌خواهید در ستون‌ها شکسته شود، شروع ‌کنید و سپس یکی از دو خصوصیت column-width یا column-count را اعمال کنید. خصوصیت column-width   به سادگی ستون‌های زیادی را متناسب با فضای موجود ایجاد می‌کند. از طرف دیگر column-count به سادگی  تعداد ستون‌هایی را که مشخص می‌کنید، ایجاد می‌کند.

column-width:

  • مقادیر: width
  • پیش‌فرض: auto
  • اعمال به: عناصر سطح بلوک، سلول‌های جدول و عناصر بلوک درون خطی 

column-count:

  • مقادیر: integer
  • پیش‌فرض: auto
  • اعمال به: عناصر سطح بلوک، سلول‌های جدول و عناصر بلوک درون خطی

اکنون، اجازه دهید آن مقاله را به یک چیدمان سه ستونی تبدیل کنیم و برای این کار از خصوصیت column-count   استفاده کنیم. این خصوصیت همیشه یک عدد صحیح که مثبت است را می‌پذیرد و نمی‌تواند به صورت عدد کسری باشد. به عنوان مثال، ۱، ۲، ۳، و غیره. مرورگرها عرض هر ستون را به طور داینامیکی تنظیم می‌کنند تا با عرضی که دستگاه اجازه می‌دهد، متناسب باشد.

Css:

article {

    column-count: 3;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

 پس‌ زمینه‌های آبی کم‌ رنگ را نیز به تگ <article>  اضافه می‌کنیم تا بتوانیم منطقه دقیقی را که روی صفحه نمایش اشغال کرده است، ببینیم:

Css:

article {

    column-count: 3;

    background-color: #e7f5fe;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

گزینه دیگر ما برای تغییر دادن ستون‌ها، رویکرد column-width   است. ما ابتدا می‌توانیم عرض ستون‌ها با مقدار  ۱۵۰ پیکسل امتحان می‌کنیم و مرورگر به همان تعداد ستون ایجاد می‌کند تا بتواند در عنصر <article>   قرار بگیرد. در صورت وجود فضای اضافی، متناسب با فضای موجود، عرض ستون به طور داینامیکی گسترش می‌یابد.

css:

article {

    column-width: 150px;

    background-color: #e7f5fe;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

اگر میدان دید را کوچک کنیم، اکنون چیدمان فقط دو ستون دارد. این یک ویژگی خوب و به صورت ریسپانسیو در ماژول چیدمان چند ستونی CSS است.

آموزش چیدمان چند ستونی با استفاده از CSS

خصوصیت Columns به صورت مختصر

شما همچنین می‌توانید ستون‌ها را با استفاده از خصوصیت Columns روی یک عنصر مشخص کنید. نکته مثبت در مورد خصوصیت Columns این است که شما می‌توانید تعداد ستون‌ها مانند ۱ یا ۲ را مشخص کنید یا می‌توانید یک عرض مانند ۳۰۰ پیکسل را مشخص کنید. علاوه بر این، می‌توانید هر دو، هم تعداد ستون‌ها و هم عرض را به طور همزمان مشخص کنید. به عنوان مثال، columns: 3 200px; با استفاده از این روش، تمام ستون ها ۲۰۰ پیکسل عرض خواهند داشت. اما اگر عرض میدان دید زیاد شود، 5 یا 6 ستون را امکان پذیر می‌کند ولی در حقیقت عدد ۳ که در columns: 3 200px;  مشخص شده بود، بیشترین ستون را تعیین می‌کند.

article {

    columns: 3 200px;

    background-color: #e7f5fe;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

یک میدان دید بسیار گسترده هنگام استفاده از columns: 3 200px; فقط سه ستون را نمایش می‌دهد.

آموزش چیدمان چند ستونی با استفاده از CSS

توجه کنید که اگر ما تعداد ۳ را حذف کرده و از columns: 200px;  استفاده کنیم، طبق قاعده، اکنون ما تعداد بیشتری ستون با عرض ۲۰۰ پیکسل خواهیم داشت.

آموزش چیدمان چند ستونی با استفاده از CSS

ستون های CSS چگونه کار می‌کنند

چیدمان چند ستونی در CSS اکنون دارای یک کانتینر جدید است که بین جعبه محتوا (content box) و محتوا وجود دارد که به آن جعبه ستون (column box) گفته می‌شود. این جعبه‌ها به صورت چیدمان چپ و راست با کلیه جعبه‌های ستون در عنصر حاوی عرض و ارتفاع یکسان چیده شده‌اند. ارتفاع به صورت پویا تنظیم می‌شود و اجازه می‌دهد تا متن حتی در تمام ستون‌ها پخش شود. در بیشتر قسمت‌ها، جعبه‌های ستون شبیه به عناصر سطح بلوک هستند. با این حال، برخی از مواردی که در مورد جعبه ستون‌ها متفاوت است این است که آن‌ها مانند یک عنصر سطح بلوک استاندارد هیچ padding، مرز یا حاشیه‌ای ندارند. علاوه بر این، هر جعبه ستون نمی‌تواند دارای رنگ پس زمینه خود باشد. در چیدمان‌های چند ستونی، padding و حاشیه روی جعبه عنصر اعمال می‌شود، نه روی ستون‌های آن.

کنترل فضای بین ستون ها

با استفاده از خصوصیت column-gap   شما می‌توانید اندازه شکاف یا گپ بین ستون‌ها را کنترل کنید. اگر مایل هستید بین ستون‌ها خط قابل رویت ایجاد کنید، در اینجا column-gap  را روی 4em  تنظیم کنید.

article {

    columns: 3;

    background-color: #e7f5fe;

    column-gap: 4em;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

اکنون، اجازه دهید یک خط عمودی بین ستون‌ها با استفاده از خصوصیت column-rule   اضافه کنیم:

article {

    columns: 3;

    background-color: #e7f5fe;

    column-gap: 4em;

    column-rule: 2px solid lightslategray;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

 

توجه کنید که خصوصیت column-rule   برای column-rule-style ، column-rule-color و  column-rule-width مختصر شده است.

تمام این خصوصیات درست مانند خصوصیات border-* کار می‌کنند. بنابراین، اگر می‌دانید چگونه از مرزها در CSS استفاده کنید، شما می‌توانید همین تکنیک‌ها را برای قوانین ستون اعمال کنید.

تصاویر در چیدمان چند ستون CSS

شما همچنین می‌توانید تصاویر را به چیدمان چند ستونی css خود اضافه کنید. ایده خوب این است که عرض هر تصویر را ۱۰۰٪ تنظیم کنید و آن‌ها برای پر کردن ستون از لبه به لبه به صورت خودکار تغییر اندازه می‌دهند. ما یک تصویر تحت عنوان سیستم عامل (Operating System) و نرم افزار برنامه اضافه خواهیم کرد.

Html:

<article>

    <h2>Operating Systems</h2>

    <img width="100%" src="operating-system.jpeg">

    <p>Operating systems come...</p>



    <p>Better to use some text...</p>



    <h2>Application Software</h2>

    <img width="100%" src="application-software.jpeg">

    <p>Application software is...</p>



    <p>Those applications for...</p>

</article>

 

آموزش چیدمان چند ستونی با استفاده از CSS

تغییر در یک چیدمان دو ستون نشان می‌دهد که تصاویر هنوز هم خوب به نظر می‌رسند و عرض هر ستون را پر می‌کنند:

article {

    columns: 2;

    background-color: #e7f5fe;

    column-rule: 2px solid lightslategray;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

رفع حاشیه ستون اول

شاید شما متوجه شده باشید که در همه مثال‌های اخیر، اولین ستون همیشه قبل از شروع محتوا کمی حاشیه دارد. تمام ستون‌های باقیمانده در پایان دارای محتوا هستند که درست تا بالای ستون می‌رود. برای برطرف کردن این مسئله، ما به سادگی می‌توانیم margin-top 0;   را برای همه عناصر داخل کانتینر ستون اعمال کنیم. در مورد کد ما، کانتینر ستون <article> است:

<article > * {

    margin-top: 0;

}

اکنون خطوط محتوای بالا در همه ستون‌ها بهتر می‌شوند.

آموزش چیدمان چند ستونی با استفاده از CSS

 هرگز صریحاً روی عنصر ستون (containing column element)، ارتفاع را مشخص نکنید. این می‌تواند میزان فضای موجود برای توزیع محتوا در همه ستون ها را محدود کند. اگر فضای کافی وجود نداشته باشد، مرورگر سرریزی ایجاد می‌کند مانند ستون‌های سرریز خارج از کانتینر ستون. این به احتمال زیاد باعث می‌شود که نوارهای پیمایشی نیز ظاهر شوند و به طور کلی خیلی عالی عمل نمی‌کنند.

آموزش چیدمان چند ستونی با استفاده از CSS

خصوصیت column-fill

اگر به دلایل دیگر نیاز به تنظیم ارتفاع روی جعبه ستون دارید، شما باید در مورد خصوصیت column-fill بیشتر بدانید. مرورگرها سعی می‌کنند با تغییر اندازه ارتفاع کانتینر ستون، محتوای بین ستون‌ها را به طور خودکار برای شما متعادل کنند. همه مثال‌های این مورد تاکنون نشان داده شده‌اند. اگر به هر حال این ارتفاع را تنظیم کنید، ممکن است مواقعی وجود داشته باشد که محتوای کافی برای پر کردن همه ستون‌ها وجود نداشته باشد. در این سناریو با استفاده از  column-fill می‌توانید نحوه متعادل کردن محتوا در سرتاسر ستون‌ها را کنترل کنید. سه حالت وجود دارد: auto ،balance یا  balance-all. که پیش‌فرض balance است. اکنون در نظر بگیرید که ما  ۶۵۰ پیکسل ارتفاع روی کانتینر داریم و column-fill  روی حالت balance تنظیم می‌شود:

article {

    height: 650px;

    columns: 3;

    background-color: #e7f5fe;

    column-rule: 2px solid lightslategray;

    column-fill: balance;

} 

آنچه اتفاق می‌افتد ارتفاع کامل کانتینر است همانطور که می‌توانید با پس زمینه آبی روشن مشاهده کنید. محتوا اما در هر سه ستون تعادل دارد و فضای خالی را در نیمه پایین هر ستون باقی می‌گذارد.

آموزش چیدمان چند ستونی با استفاده از CSS

گزینه‌های دیگر برای تنظیم column-fill روی حالت auto  است. این به معنای پر کردن هر ستون از بالا به پایین به طور کامل قبل از حرکت به ستون بعدی است. اکنون، هر سه ستون ارائه شده‌اند، با این وجود فقط محتوای کافی برای پر کردن دو قسمت اول وجود دارد.

article {

    height: 650px;

    columns: 3;

    background-color: #e7f5fe;

    column-rule: 2px solid lightslategray;

    column-fill: auto;

}

 آموزش چیدمان چند ستونی با استفاده از CSS

چگونه ستون ها را بچرخانیم

با خاصیت column-span  شما می‌توانید با یک عنصر درون کانتینر ستون، افکت‌های really cool ایجاد کنید. در اصل، شما می‌توانید چیزی مانند column-span: all;  را روی یک عنصر اعمال کنید و از جعبه ستون خارج شده و تمام ستون‌ها را طی می‌کند. تأثیر این کار در ایجاد یک تقسیم افقی انواع  است که ستون‌های بالا و ستون‌های پایین به آن مربوط می‌شوند. در نشانه گذاری، پاراگراف جدیدی را که در زیر برجسته شده است اضافه کرده‌ایم:

 در اینجا css برای کلاس .spancolumns است. بیشتر آن برای یک استایل طراحی شده است، اما به خصوصیت column-span توجه کنید:

p.spancolumns {

    column-span: all;

    font-weight: bold;

    font-size: 1.2em;

    background-color: lightskyblue;

    border-top: 1px solid black;

    border-bottom: 1px solid black;

    padding: .5em;

    margin: .5em;

    text-align: center;

}

 

آموزش چیدمان چند ستونی با استفاده از CSS

خلاصه چیدمان چند ستون با CSS

در این آموزش ما همه چیز درباره ایجاد چیدمان‌های چند ستونی با استفاده از CSS آموختیم. ماژول چیدمان چند ستون CSS همان چیزی است که این نوع چیدمان را امکان پذیر می‌کند. خصوصیات زیر برخی از مواردی است که ما برای نشان دادن مثال‌های کد در بالا استفاده کردیم:

  • column-count: تعداد ستون‌ها را که یک عنصر باید به آن‌ها تقسیم شود، تعیین می‌کند.
  • Columns: در صورت تمایل می‌توانید از این به جای column-count استفاده کنید.
  • column-fill: اگر یک ارتفاع برای یک عنصر چند ستونی تنظیم شده باشد، column-fill   نحوه پر کردن محتوا ستون‌ها را کنترل می‌کند.
  • column-gap: عرض شکاف بین ستون‌ها را تعیین می‌کند.
  • column-rule: مختصر برای column-rule-style ، column-rule-width و column-rule-color ، استایل قاعده و قانون بین ستون‌ها را تنظیم می‌کند.
  • column-span: شما می‌توانید با استفاده از column-span  ، یک عنصر span را در  همه ستون‌ها ایجاد کنید.
  • column-width: در صورت تمایل شما می‌توانید عرض ستون‌ها را دقیقاً تنظیم کنید.

مطالعه مقالات آموزشی بیشتر در لیداوب:

این قسمت از آموزش نیز به پایان رسید. با آموزش‌های بعدی ما در لیداوب همراه باشید.

 

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
سورس خرید و فروش ارزهای دیجیتال
ثبت امتیاز
5 (1 رای)

   لطفا صبر کنید ...