<?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>column-fill Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/column-fill/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/column-fill/</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>Difference Between column-gap, column-span &#038; column-fill in CSS</title>
		<link>https://www.scmgalaxy.com/tutorials/difference-between-column-gap-column-span-column-fill-in-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/difference-between-column-gap-column-span-column-fill-in-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Tue, 10 Aug 2021 12:42:12 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[column-fill]]></category>
		<category><![CDATA[column-gap]]></category>
		<category><![CDATA[column-span]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=7747</guid>

					<description><![CDATA[<p>column-gap&#8211; This property is used to specify the gap between the columns. We can set this property to normal (default) [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/difference-between-column-gap-column-span-column-fill-in-css/">Difference Between column-gap, column-span &#038; column-fill in CSS</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading"><strong>column-gap</strong>&#8211;</h3>



<p class="wp-block-paragraph">This property is used to specify the gap between the columns. We can set this property to normal (default) and length.</p>



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



<p class="wp-block-paragraph">div { column-gap: 30px;}</p>



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



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="847" height="288" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-76.png" alt="" class="wp-image-7749" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-76.png 847w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-76-300x102.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-76-768x261.png 768w" sizes="(max-width: 847px) 100vw, 847px" /></figure>



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



<p class="wp-block-paragraph">This property is used to specify how many columns an element should span across. We can set this property to none (default) and all.</p>



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



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



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



<figure class="wp-block-image size-large"><img decoding="async" src="blob:https://www.scmgalaxy.com/b4862f20-ef2c-4fab-8252-7690850f2d43" alt=""/></figure>



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



<p class="wp-block-paragraph">This property is used to specify how to fill columns, balanced or not. We can set this property to balance (default) and auto.</p>



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



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



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



<figure class="wp-block-image size-large"><img decoding="async" width="816" height="160" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-75.png" alt="" class="wp-image-7748" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-75.png 816w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-75-300x59.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-75-768x151.png 768w" sizes="(max-width: 816px) 100vw, 816px" /></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/difference-between-column-gap-column-span-column-fill-in-css/">Difference Between column-gap, column-span &#038; column-fill 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/difference-between-column-gap-column-span-column-fill-in-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
