Popular syntax - Revision history

Bacchas at 16:16, 17 June 2023

2023-06-17T16:16:39Z

← Older revision		Revision as of 16:16, 17 June 2023
Line 1:		Line 1:
			==Clamp==
			'''fluid designs without using media quires'''
			<pre>
			.box{
			margin: 15px auto;
			background: red;
			width: clamp(220px, 55%,300px);
			height: 150px;
			}
			//min width, prefered width, max width

			</pre>
	== Centering divs ==		== Centering divs ==
	<pre>		<pre>

2023-01-16T16:10:18Z

Centering Divs using autofit

← Older revision		Revision as of 16:10, 16 January 2023
Line 20:		Line 20:
	</pre>		</pre>

	== Centering Divs using ~~autofit~~ ==		== Centering Divs using AutoFit==

	<p class="subhead">The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</p>		<p class="subhead">The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</p>
Line 31:		Line 31:
	grid-template-columns: repeat(auto-fit, minmax(100px, max-content));		grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
	justify-content: center;		justify-content: center;


	== Centering Text Vertically in DIV ==		== Centering Text Vertically in DIV ==

2022-12-19T17:31:58Z

Dealing with images

← Older revision		Revision as of 17:31, 19 December 2022
Line 58:		Line 58:
	img{aspect-ratio: 1 / .5;}		img{aspect-ratio: 1 / .5;}

	<p class="subhead"> Make images the same size without ~~screeching~~ and knock out the background</p>		<p class="subhead"> Make images the same size without stretching and knock out the background</p>
	img{		img{
	width: 15%;		width: 15%;

2022-12-19T17:30:26Z

Dealing with images

← Older revision		Revision as of 17:30, 19 December 2022
Line 57:		Line 57:
	or		or
	img{aspect-ratio: 1 / .5;}		img{aspect-ratio: 1 / .5;}

			<p class="subhead"> Make images the same size without screeching and knock out the background</p>
			img{
			width: 15%;
			aspect-ratio: 3/2;
			object-fit: contain;
			mix-blend-mode: color-burn;

	==Media Queries==		==Media Queries==

2022-12-18T20:47:46Z

← Older revision		Revision as of 20:47, 18 December 2022
Line 23:		Line 23:

	<p class="subhead">The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</p>		<p class="subhead">The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</p>
	grid-template-columns: repeat(auto-fit, minmax(250px, max-content));		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

			<p class="subhead">As described above, centering the grid items is not possible because there is no free space available on the line for alignment purposes.</p>

			<p class="subhead">One way around this, which still allows for flexible column sizes, is to use max-content instead of 1fr, along with auto-fit.</p>

			grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
			justify-content: center;


	== Centering Text Vertically in DIV ==		== Centering Text Vertically in DIV ==

2022-12-18T20:30:25Z

← Older revision		Revision as of 20:30, 18 December 2022
Line 22:		Line 22:
	== Centering Divs using autofit ==		== Centering Divs using autofit ==

			<p class="subhead">The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</p>
	<p class="subhead"~~>auto-fit</p>~~		grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
	~~<h3~~>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.

	~~In your case,~~ since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</h3>


	== Centering Text Vertically in DIV ==		== Centering Text Vertically in DIV ==

2022-12-18T20:25:17Z

← Older revision		Revision as of 20:25, 18 December 2022
Line 23:		Line 23:


	<p class="~~heading~~">auto-fit</p>		<p class="subhead">auto-fit</p>
	<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.		<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.

2022-12-18T20:13:27Z

← Older revision		Revision as of 20:13, 18 December 2022
Line 21:		Line 21:

	== Centering Divs using autofit ==		== Centering Divs using autofit ==
	~~<style>~~
	~~.heading{font-size: 2rem;}~~
	~~</style>~~
	<p class="heading">auto-fit</p>		<p class="heading">auto-fit</p>
	<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.		<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.

2022-12-18T20:11:13Z

← Older revision		Revision as of 20:11, 18 December 2022
Line 21:		Line 21:

	== Centering Divs using autofit ==		== Centering Divs using autofit ==
			<style>
			.heading{font-size: 2rem;}
			</style>
	<p class="heading">auto-fit</p>		<p class="heading">auto-fit</p>
	<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.		<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.

2022-12-18T20:05:55Z

← Older revision		Revision as of 20:05, 18 December 2022
Line 21:		Line 21:

	== Centering Divs using autofit ==		== Centering Divs using autofit ==
	<h2>auto-fit</h2>		<p class="heading">auto-fit</p>
	<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.		<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.