<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>columns Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/columns/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/columns/</link>
	<description>A Platform for Software Engineers</description>
	<lastBuildDate>Wed, 13 Apr 2022 16:34:30 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>How to use Columns Property in CSS?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-use-columns-property-in-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-use-columns-property-in-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Tue, 10 Aug 2021 02:17:02 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[column-count]]></category>
		<category><![CDATA[column-width]]></category>
		<category><![CDATA[columns]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[property]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=7665</guid>

					<description><![CDATA[<p>This property is used to define columns. column-count column-width columns column-count&#8211; This property is used to specify the number of [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-columns-property-in-css/">How to use Columns Property in CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">This property is used to define columns.</p>



<ul class="wp-block-list"><li>column-count</li><li>column-width</li><li>columns</li></ul>



<script src="https://gist.github.com/ajcotocus/a4e6f1291b33446d94470628d43f9fa7.js"></script>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="858" height="259" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-68.png" alt="" class="wp-image-7666" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-68.png 858w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-68-300x91.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-68-768x232.png 768w" sizes="(max-width: 858px) 100vw, 858px" /></figure>



<h3 class="wp-block-heading"><strong>column-count</strong>&#8211;</h3>



<p class="wp-block-paragraph">This property is used to specify the number of columns an element should be divided into. We can set this property to <em>number</em> or <em>auto </em>(default).</p>



<p class="wp-block-paragraph"><strong>Ex:-</strong></p>



<p class="wp-block-paragraph">div { column-count: 2;}</p>



<script src="https://gist.github.com/ajcotocus/739e2fbd4b061474bd62a87bbe23dc84.js"></script>



<figure class="wp-block-image size-large"><img decoding="async" width="868" height="350" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-69.png" alt="" class="wp-image-7667" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-69.png 868w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-69-300x121.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-69-768x310.png 768w" sizes="(max-width: 868px) 100vw, 868px" /></figure>



<h3 class="wp-block-heading"><strong>column-width</strong>&#8211;</h3>



<p class="wp-block-paragraph">This property is used to specify width for the columns. We can set this property to <em>length</em> or <em>auto </em>(default).</p>



<p class="wp-block-paragraph"><strong>Ex:-</strong></p>



div { 
	column-count: 2;
	column-width: 100px;
} 
div { 
	column-width: 200px;
} 




<script src="https://gist.github.com/ajcotocus/768829a695f9f567b3af736cd4243aa6.js"></script>



<figure class="wp-block-image size-large"><img decoding="async" width="848" height="308" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-70.png" alt="" class="wp-image-7668" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-70.png 848w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-70-300x109.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-70-768x279.png 768w" sizes="(max-width: 848px) 100vw, 848px" /></figure>



<h3 class="wp-block-heading"><strong>columns</strong>&#8211;</h3>



<p class="wp-block-paragraph">This is shorthand which is used to set column-width and column-count.</p>



<p class="wp-block-paragraph"><strong>Syntax: &#8211;</strong></p>



<p class="wp-block-paragraph">Selector { columns: column-width column-count;}</p>



<p class="wp-block-paragraph"><strong>Ex:-</strong></p>



<p class="wp-block-paragraph">div { columns: 200px 2;}</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-columns-property-in-css/">How to use Columns Property in CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-use-columns-property-in-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
