SaltyCrane: csshttps://www.saltycrane.com/blog/2021-01-28T15:41:00-08:00How height is set in CSS
2021-01-28T15:41:00-08:00https://www.saltycrane.com/blog/2021/01/how-height-set-css/<div id="cwcs">
<style>
#cwcs a {
border-bottom: 1px dotted;
}
#cwcs ul {
margin-left: 10px;
}
#cwcs .code-block {
border-radius: 0;
margin: 0;
padding: 5px 10px;
position: relative;
}
#cwcs .code-label {
background-color: #fff;
border-radius: 4px;
color: #6c757d;
padding: 2px 5px 0 5px;
position: absolute;
right: 4px;
top: 2px;
}
#cwcs .flex-row {
align-items: flex-start;
display: flex;
}
.label-overlay {
position: relative;
}
.label-cntr {
background-color: #fff;
color: #6c757d;
left: 5px;
padding: 0 2.5px;
position: absolute;
top: -11px;
}
.label-expl {
background-color: #fff;
color: #0d6efd;
left: 26px;
padding: 0 2.5px;
position: absolute;
top: 11px;
}
.label-cont {
background-color: #fff;
color: #6c757d;
left: 47px;
padding: 0 2.5px;
position: absolute;
top: 31px;
}
.cntr {
background-color: #fff;
border: 1px solid #ced4da;
padding: 20px;
width: 200px;
}
.cont {
background-color: #fff;
border: 1px solid #ced4da;
display: block;
height: 20px;
width: 100px;
}
.expl {
background-color: #fff;
border: 1px solid #0d6efd;
padding: 20px;
}
#cwcs .stack {
display: grid;
grid-gap: 10px;
justify-items: start;
}
</style>
<p>
Here are some CSS experiments to test when elements adjust to the height of
their container and when they adjust to the height of their content. The
script to generate the experiments is
<a href="https://github.com/saltycrane/css-cheat-sheets">on github</a> and
the results are shown below. See also my companion page on
<a href="/blog/2020/04/how-width-set-css/">CSS width</a>.
</p>
<div>
By default, elements adjust to <b>height of their container</b> when they
are
</div>
<ul>
<li>elements in <a href="#3a">flex row containers</a></li>
<li>elements in <a href="#5a">grid containers with short content</a></li>
</ul>
<div>
By default, elements adjust to the <b>height of their content</b> when they
are
</div>
<ul>
<li>elements in <a href="#1a">block containers</a></li>
<li>elements in <a href="#4a">flex column containers</a></li>
<li>elements in <a href="#5b">grid containers with tall content</a></li>
<li>elements that are <a href="#6a">absolutely positioned</a></li>
<li>elements that are <a href="#7a">floated</a></li>
</ul>
<div>
Some elements can be made to adjust to the
<b>height of their container</b> by
</div>
<ul>
<li>
setting <code>height</code> to <code>100%</code> for elements in
<a href="#1c">block containers</a>, elements in
<a href="#4c">flex column containers</a>,
<a href="#6c">absolutely positioned elements</a>, and
<a href="#7c">floated elements</a>. (Note: it does not have an effect for
elements in <a href="#5c">grid containers</a>.)
</li>
<li>
setting <code>flex-grow</code> for elements in
<a href="#4e">flex column containers</a> where content is shorter than the
container. (Note: it adjusts to the height of the content if the
<a href="#4f">content is tailler than the container</a>.)
</li>
<li>
setting <code>overflow</code> for elements in
<a href="#5d">grid containers with tall content</a>
</li>
</ul>
<div>
Some elements can be made to adjust to the <b>height of their content</b> by
</div>
<ul>
<li>
setting <code>align-items</code> to something other than
<code>stretch</code> for elements in
<a href="#3c">flex row containers</a> and elements in
<a href="#5e">grid containers</a>
</li>
</ul>
<div>
Some miscellaneous cases:
<ul>
<li>
for elements in <a href="#5d">grid containers</a>, setting
<code>overflow</code> limits an element's height to the height of
its container for tall content
</li>
<li>
<a href="#4f">flex column containers with <code>flex-grow</code> set</a>
expand to the height of their content for tall content
</li>
<li>
<a href="#5c">elements in grid containers</a> setting
<code>height</code> to <code>100%</code> are NOT limited by the height
of their container
</li>
<li>
setting <code>overflow</code> has no effect for
<a href="#5g">elements in grid containers</a> when
<code>align-items</code> is set
</li>
</ul>
</div>
<h4 id="see-also">See also</h4>
<div>
<ul class="list-inline">
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"
>MDN documentation on display</a
>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
>MDN documentation on height</a
>
</li>
<li>
<a href="https://www.w3.org/TR/css-display-3/#the-display-properties"
>CSS specification on display</a
>
</li>
<li>
<a href="https://www.w3.org/TR/css-sizing-3/"
>CSS specification on sizing</a
>
</li>
</ul>
</div>
<h4 id="block">Block containers</h4>
<div>
<div>
<b id="1a">Block containers</b> - elements in block containers adjust to
the <b>height of their content</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-1a {
display: block; /* default */
height: 400px;
}
#example-1a {
}
#content-1a {
height: 80px;
}
</style>
<div class="cntr" id="container-1a">
<div class="expl" id="example-1a">
<div class="cont" id="content-1a"></div>
</div>
</div>
<div class="label-cntr">#container-1a</div>
<div class="label-expl">#example-1a</div>
<div class="label-cont">#content-1a</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1a">
<div id="example-1a">
<div id="content-1a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1a {
display: block; /* default */
height: 400px;
}
#example-1a {}
#content-1a {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="1b">Block containers, tall content</b> - elements in block
containers adjust to the <b>height of their content</b> even when the
content is taller than the container
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-1b {
display: block; /* default */
height: 400px;
}
#example-1b {
}
#content-1b {
height: 420px;
}
</style>
<div class="cntr" id="container-1b">
<div class="expl" id="example-1b">
<div class="cont" id="content-1b"></div>
</div>
</div>
<div class="label-cntr">#container-1b</div>
<div class="label-expl">#example-1b</div>
<div class="label-cont">#content-1b</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1b">
<div id="example-1b">
<div id="content-1b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1b {
display: block; /* default */
height: 400px;
}
#example-1b {}
#content-1b {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div>
<b id="1c">Block elements, height 100%</b> - block elements expand to the
<b>height of their container</b> if height is set to 100%
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-1c {
display: block; /* default */
height: 400px;
}
#example-1c {
height: 100%;
}
#content-1c {
height: 80px;
}
</style>
<div class="cntr" id="container-1c">
<div class="expl" id="example-1c">
<div class="cont" id="content-1c"></div>
</div>
</div>
<div class="label-cntr">#container-1c</div>
<div class="label-expl">#example-1c</div>
<div class="label-cont">#content-1c</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1c">
<div id="example-1c">
<div id="content-1c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1c {
display: block; /* default */
height: 400px;
}
#example-1c {
height: 100%;
}
#content-1c {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 60px;">
<div>
<b id="1d">Block elements, tall content, height 100%</b> - block elements
contract to the <b>height of their container</b> if height is set to 100%
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-1d {
display: block; /* default */
height: 400px;
}
#example-1d {
height: 100%;
}
#content-1d {
height: 420px;
}
</style>
<div class="cntr" id="container-1d">
<div class="expl" id="example-1d">
<div class="cont" id="content-1d"></div>
</div>
</div>
<div class="label-cntr">#container-1d</div>
<div class="label-expl">#example-1d</div>
<div class="label-cont">#content-1d</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1d">
<div id="example-1d">
<div id="content-1d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1d {
display: block; /* default */
height: 400px;
}
#example-1d {
height: 100%;
}
#content-1d {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="flex-row">Flex row containers</h4>
<div>
<div>
<b id="3a">Flex row container</b> - elements in flex row containers expand
to the <b>height of their container</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-3a {
align-items: normal; /* default - behaves as stretch in this case */
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3a {
}
#content-3a {
height: 80px;
}
</style>
<div class="cntr" id="container-3a">
<div class="expl" id="example-3a">
<div class="cont" id="content-3a"></div>
</div>
</div>
<div class="label-cntr">#container-3a</div>
<div class="label-expl">#example-3a</div>
<div class="label-cont">#content-3a</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3a">
<div id="example-3a">
<div id="content-3a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3a {
align-items: normal; /* default - behaves as stretch in this case */
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3a {}
#content-3a {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 60px;">
<div>
<b id="3b">Flex row container, tall content</b> - elements in flex row
containers contract to the <b>height of their container</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-3b {
align-items: normal; /* default - behaves as stretch in this case */
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3b {
}
#content-3b {
height: 420px;
}
</style>
<div class="cntr" id="container-3b">
<div class="expl" id="example-3b">
<div class="cont" id="content-3b"></div>
</div>
</div>
<div class="label-cntr">#container-3b</div>
<div class="label-expl">#example-3b</div>
<div class="label-cont">#content-3b</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3b">
<div id="example-3b">
<div id="content-3b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3b {
align-items: normal; /* default - behaves as stretch in this case */
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3b {}
#content-3b {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div>
<b id="3c">Flex row container, align-items set</b> - elements in flex row
containers adjust to the <b>height of their content</b> if
<code>align-items</code> is set to something other than
<code>stretch</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-3c {
align-items: flex-start;
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3c {
}
#content-3c {
height: 80px;
}
</style>
<div class="cntr" id="container-3c">
<div class="expl" id="example-3c">
<div class="cont" id="content-3c"></div>
</div>
</div>
<div class="label-cntr">#container-3c</div>
<div class="label-expl">#example-3c</div>
<div class="label-cont">#content-3c</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3c">
<div id="example-3c">
<div id="content-3c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3c {
align-items: flex-start;
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3c {}
#content-3c {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="3d">Flex row container, align-items set, tall content</b> -
elements in flex row containers adjust to the
<b>height of their content</b> if <code>align-items</code> is set to
something other than <code>stretch</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-3d {
align-items: flex-start;
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3d {
}
#content-3d {
height: 420px;
}
</style>
<div class="cntr" id="container-3d">
<div class="expl" id="example-3d">
<div class="cont" id="content-3d"></div>
</div>
</div>
<div class="label-cntr">#container-3d</div>
<div class="label-expl">#example-3d</div>
<div class="label-cont">#content-3d</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3d">
<div id="example-3d">
<div id="content-3d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3d {
align-items: flex-start;
display: flex;
flex-direction: row; /* default */
height: 400px;
}
#example-3d {}
#content-3d {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="flex-column">Flex column containers</h4>
<div>
<div>
<b id="4a">Flex column container</b> - elements in flex columns containers
<b>adjust to the height</b> of the content by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-4a {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4a {
}
#content-4a {
height: 80px;
}
</style>
<div class="cntr" id="container-4a">
<div class="expl" id="example-4a">
<div class="cont" id="content-4a"></div>
</div>
</div>
<div class="label-cntr">#container-4a</div>
<div class="label-expl">#example-4a</div>
<div class="label-cont">#content-4a</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4a">
<div id="example-4a">
<div id="content-4a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4a {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4a {}
#content-4a {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="4b">Flex column container, tall content</b> - elements in flex
columns containers <b>adjust to the height</b> of their content even for
tall content
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-4b {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4b {
}
#content-4b {
height: 420px;
}
</style>
<div class="cntr" id="container-4b">
<div class="expl" id="example-4b">
<div class="cont" id="content-4b"></div>
</div>
</div>
<div class="label-cntr">#container-4b</div>
<div class="label-expl">#example-4b</div>
<div class="label-cont">#content-4b</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4b">
<div id="example-4b">
<div id="content-4b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4b {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4b {}
#content-4b {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div>
<b id="4c">Flex column container, height: 100%</b> - elements in flex
column containers expand to the <b>height of their container</b> if
<code>height</code> is set to <code>100%</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-4c {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4c {
height: 100%;
}
#content-4c {
height: 80px;
}
</style>
<div class="cntr" id="container-4c">
<div class="expl" id="example-4c">
<div class="cont" id="content-4c"></div>
</div>
</div>
<div class="label-cntr">#container-4c</div>
<div class="label-expl">#example-4c</div>
<div class="label-cont">#content-4c</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4c">
<div id="example-4c">
<div id="content-4c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4c {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4c {
height: 100%;
}
#content-4c {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 60px;">
<div>
<b id="4d">Flex column container, height: 100%, tall content</b> -
elements in flex column containers contract to the
<b>height of their container</b> if <code>height</code> is set to
<code>100%</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-4d {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4d {
height: 100%;
}
#content-4d {
height: 420px;
}
</style>
<div class="cntr" id="container-4d">
<div class="expl" id="example-4d">
<div class="cont" id="content-4d"></div>
</div>
</div>
<div class="label-cntr">#container-4d</div>
<div class="label-expl">#example-4d</div>
<div class="label-cont">#content-4d</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4d">
<div id="example-4d">
<div id="content-4d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4d {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4d {
height: 100%;
}
#content-4d {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div>
<b id="4e">Flex column container, flex-grow</b> - elements in flex column
containers expand to the <b>height of their container</b> when
<code>flex-grow</code> is set to <code>1</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-4e {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4e {
flex-grow: 1;
}
#content-4e {
height: 80px;
}
</style>
<div class="cntr" id="container-4e">
<div class="expl" id="example-4e">
<div class="cont" id="content-4e"></div>
</div>
</div>
<div class="label-cntr">#container-4e</div>
<div class="label-expl">#example-4e</div>
<div class="label-cont">#content-4e</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4e">
<div id="example-4e">
<div id="content-4e" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4e {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4e {
flex-grow: 1;
}
#content-4e {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="4f">Flex column container, flex-grow, tall content</b> - elements
in flex column containers expand to the
<b>height of their content</b> when <code>flex-grow</code> is set to
<code>1</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-4f {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4f {
flex-grow: 1;
}
#content-4f {
height: 420px;
}
</style>
<div class="cntr" id="container-4f">
<div class="expl" id="example-4f">
<div class="cont" id="content-4f"></div>
</div>
</div>
<div class="label-cntr">#container-4f</div>
<div class="label-expl">#example-4f</div>
<div class="label-cont">#content-4f</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4f">
<div id="example-4f">
<div id="content-4f" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4f {
display: flex;
flex-direction: column;
justify-content: normal; /* default */
height: 400px;
}
#example-4f {
flex-grow: 1;
}
#content-4f {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="grid">Grid containers</h4>
<div>
<div>
<b id="5a">Grid container</b> - elements in grid containers expand to the
<b>height of the container</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-5a {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5a {
}
#content-5a {
height: 80px;
}
</style>
<div class="cntr" id="container-5a">
<div class="expl" id="example-5a">
<div class="cont" id="content-5a"></div>
</div>
</div>
<div class="label-cntr">#container-5a</div>
<div class="label-expl">#example-5a</div>
<div class="label-cont">#content-5a</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5a">
<div id="example-5a">
<div id="content-5a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5a {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5a {}
#content-5a {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="5b">Grid container, tall content</b> - elements with tall content
in grid containers expand to the <b>height of the content</b>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-5b {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5b {
}
#content-5b {
height: 420px;
}
</style>
<div class="cntr" id="container-5b">
<div class="expl" id="example-5b">
<div class="cont" id="content-5b"></div>
</div>
</div>
<div class="label-cntr">#container-5b</div>
<div class="label-expl">#example-5b</div>
<div class="label-cont">#content-5b</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5b">
<div id="example-5b">
<div id="content-5b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5b {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5b {}
#content-5b {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="5c">Grid container, tall content, height 100%</b> - surprisingly,
setting <code>height</code> to <code>100%</code> does not contract an
element's height to the height of its container. The element adjusts
to the <b>height of the content</b>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-5c {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5c {
height: 100%;
}
#content-5c {
height: 420px;
}
</style>
<div class="cntr" id="container-5c">
<div class="expl" id="example-5c">
<div class="cont" id="content-5c"></div>
</div>
</div>
<div class="label-cntr">#container-5c</div>
<div class="label-expl">#example-5c</div>
<div class="label-cont">#content-5c</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5c">
<div id="example-5c">
<div id="content-5c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5c {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5c {
height: 100%;
}
#content-5c {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div>
<b id="5d">Grid container, tall content, overflow</b> - elements with tall
content in grid containers adjust to the <b>height of the container</b> if
<code>overflow</code> is set to something other than <code>visible</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-5d {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5d {
overflow: auto;
}
#content-5d {
height: 420px;
}
</style>
<div class="cntr" id="container-5d">
<div class="expl" id="example-5d">
<div class="cont" id="content-5d"></div>
</div>
</div>
<div class="label-cntr">#container-5d</div>
<div class="label-expl">#example-5d</div>
<div class="label-cont">#content-5d</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5d">
<div id="example-5d">
<div id="content-5d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5d {
align-items: normal; /* default - behaves like stretch in this case */
display: grid;
height: 400px;
}
#example-5d {
overflow: auto;
}
#content-5d {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div>
<b id="5e">Grid container, align-items</b> - if a grid container sets
<code>align-items</code> to something other than <code>stretch</code> (the
default), then the element will adjust to the
<b>height of the content</b>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items"
>MDN docs on <code>align-items</code></a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-5e {
align-items: start;
display: grid;
height: 400px;
}
#example-5e {
}
#content-5e {
height: 80px;
}
</style>
<div class="cntr" id="container-5e">
<div class="expl" id="example-5e">
<div class="cont" id="content-5e"></div>
</div>
</div>
<div class="label-cntr">#container-5e</div>
<div class="label-expl">#example-5e</div>
<div class="label-cont">#content-5e</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5e">
<div id="example-5e">
<div id="content-5e" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5e {
align-items: start;
display: grid;
height: 400px;
}
#example-5e {}
#content-5e {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="5f">Grid container, align-items, tall content</b> - elements with
tall content in grid containers expand to the <b>height of the content</b>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-5f {
align-items: start;
display: grid;
height: 400px;
}
#example-5f {
}
#content-5f {
height: 420px;
}
</style>
<div class="cntr" id="container-5f">
<div class="expl" id="example-5f">
<div class="cont" id="content-5f"></div>
</div>
</div>
<div class="label-cntr">#container-5f</div>
<div class="label-expl">#example-5f</div>
<div class="label-cont">#content-5f</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5f">
<div id="example-5f">
<div id="content-5f" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5f {
align-items: start;
display: grid;
height: 400px;
}
#example-5f {}
#content-5f {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div>
<b id="5g">Grid container, align-items, tall content, overflow</b> -
elements with tall content in grid containers expand to the
<b>height of the content</b> even if <code>overflow</code> is set
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-5g {
align-items: start;
display: grid;
height: 400px;
}
#example-5g {
overflow: auto;
}
#content-5g {
height: 420px;
}
</style>
<div class="cntr" id="container-5g">
<div class="expl" id="example-5g">
<div class="cont" id="content-5g"></div>
</div>
</div>
<div class="label-cntr">#container-5g</div>
<div class="label-expl">#example-5g</div>
<div class="label-cont">#content-5g</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5g">
<div id="example-5g">
<div id="content-5g" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5g {
align-items: start;
display: grid;
height: 400px;
}
#example-5g {
overflow: auto;
}
#content-5g {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="absolute">Absolute positioning</h4>
<div>
<div><b id="6a">Absolutely positioned</b> -</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-6a {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6a {
position: absolute;
}
#content-6a {
height: 80px;
}
</style>
<div class="cntr" id="container-6a">
<div class="expl" id="example-6a">
<div class="cont" id="content-6a"></div>
</div>
</div>
<div class="label-cntr">#container-6a</div>
<div class="label-expl">#example-6a</div>
<div class="label-cont">#content-6a</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-6a">
<div id="example-6a">
<div id="content-6a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-6a {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6a {
position: absolute;
}
#content-6a {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 80px;">
<div><b id="6b">Absolutely positioned, tall content</b> -</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-6b {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6b {
position: absolute;
}
#content-6b {
height: 420px;
}
</style>
<div class="cntr" id="container-6b">
<div class="expl" id="example-6b">
<div class="cont" id="content-6b"></div>
</div>
</div>
<div class="label-cntr">#container-6b</div>
<div class="label-expl">#example-6b</div>
<div class="label-cont">#content-6b</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-6b">
<div id="example-6b">
<div id="content-6b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-6b {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6b {
position: absolute;
}
#content-6b {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div><b id="6c">Absolutely positioned, height 100%</b> -</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-6c {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6c {
height: 100%;
position: absolute;
}
#content-6c {
height: 80px;
}
</style>
<div class="cntr" id="container-6c">
<div class="expl" id="example-6c">
<div class="cont" id="content-6c"></div>
</div>
</div>
<div class="label-cntr">#container-6c</div>
<div class="label-expl">#example-6c</div>
<div class="label-cont">#content-6c</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-6c">
<div id="example-6c">
<div id="content-6c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-6c {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6c {
height: 100%;
position: absolute;
}
#content-6c {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div style="margin-bottom: 60px;">
<div><b id="6d">Absolutely positioned, height 100%, tall content</b> -</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-6d {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6d {
height: 100%;
position: absolute;
}
#content-6d {
height: 420px;
}
</style>
<div class="cntr" id="container-6d">
<div class="expl" id="example-6d">
<div class="cont" id="content-6d"></div>
</div>
</div>
<div class="label-cntr">#container-6d</div>
<div class="label-expl">#example-6d</div>
<div class="label-cont">#content-6d</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-6d">
<div id="example-6d">
<div id="content-6d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-6d {
display: block; /* default */
position: relative;
height: 400px;
}
#example-6d {
height: 100%;
position: absolute;
}
#content-6d {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="float">Floated elements</h4>
<div>
<div>
<b id="7a">Floated elements</b> - elements that set
<code>float</code> adjust to the <b>height of their content</b>.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float"
>MDN docs on <code>float</code></a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-7a {
display: block; /* default */
height: 400px;
}
#example-7a {
float: left;
}
#content-7a {
height: 80px;
}
</style>
<div class="cntr" id="container-7a">
<div class="expl" id="example-7a">
<div class="cont" id="content-7a"></div>
</div>
</div>
<div class="label-cntr">#container-7a</div>
<div class="label-expl">#example-7a</div>
<div class="label-cont">#content-7a</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-7a">
<div id="example-7a">
<div id="content-7a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-7a {
display: block; /* default */
height: 400px;
}
#example-7a {
float: left;
}
#content-7a {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div>
<b id="7b">Floated elements, tall content</b> - elements that set
<code>float</code> adjust to the <b>height of their content</b>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-7b {
display: block; /* default */
height: 400px;
}
#example-7b {
float: left;
}
#content-7b {
height: 420px;
}
</style>
<div class="cntr" id="container-7b">
<div class="expl" id="example-7b">
<div class="cont" id="content-7b"></div>
</div>
</div>
<div class="label-cntr">#container-7b</div>
<div class="label-expl">#example-7b</div>
<div class="label-cont">#content-7b</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-7b">
<div id="example-7b">
<div id="content-7b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-7b {
display: block; /* default */
height: 400px;
}
#example-7b {
float: left;
}
#content-7b {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div><b id="7c">Floated elements, height 100%</b> -</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-7c {
display: block; /* default */
height: 400px;
}
#example-7c {
float: left;
height: 100%;
}
#content-7c {
height: 80px;
}
</style>
<div class="cntr" id="container-7c">
<div class="expl" id="example-7c">
<div class="cont" id="content-7c"></div>
</div>
</div>
<div class="label-cntr">#container-7c</div>
<div class="label-expl">#example-7c</div>
<div class="label-cont">#content-7c</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-7c">
<div id="example-7c">
<div id="content-7c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-7c {
display: block; /* default */
height: 400px;
}
#example-7c {
float: left;
height: 100%;
}
#content-7c {
height: 80px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div><b id="7d">Floated elements, height 100%, tall content</b> -</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="flex-row">
<div class="label-overlay">
<style>
#container-7d {
display: block; /* default */
height: 400px;
}
#example-7d {
float: left;
height: 100%;
}
#content-7d {
height: 420px;
}
</style>
<div class="cntr" id="container-7d">
<div class="expl" id="example-7d">
<div class="cont" id="content-7d"></div>
</div>
</div>
<div class="label-cntr">#container-7d</div>
<div class="label-expl">#example-7d</div>
<div class="label-cont">#content-7d</div>
</div>
<div style="min-width: 10px; width: 10px;"></div>
<div class="stack">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-7d">
<div id="example-7d">
<div id="content-7d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-7d {
display: block; /* default */
height: 400px;
}
#example-7d {
float: left;
height: 100%;
}
#content-7d {
height: 420px;
}</pre>
</div>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
</div>
How width is set in CSS
2020-04-02T22:29:20-07:00https://www.saltycrane.com/blog/2020/04/how-width-set-css/<div id="cwcs">
<style>
#cwcs a {
border-bottom: 1px dotted;
}
#cwcs ul {
margin-left: 10px;
}
#cwcs .code-block {
border-radius: 0;
margin: 0;
padding: 5px 10px;
position: relative;
}
#cwcs .code-label {
background-color: #fff;
border-radius: 4px;
color: #6c757d;
padding: 2px 5px 0 5px;
position: absolute;
right: 4px;
top: 2px;
}
#cwcs .code-row {
align-items: start;
display: grid;
grid-gap: 10px;
grid-template-columns: auto 1fr;
justify-items: start;
}
.label-overlay {
position: relative;
}
.label-cntr {
background-color: #fff;
color: #6c757d;
left: 5px;
padding: 0 2.5px;
position: absolute;
top: -11px;
}
.label-expl {
background-color: #fff;
color: #0d6efd;
left: 26px;
padding: 0 2.5px;
position: absolute;
top: 11px;
}
.label-cont {
background-color: #fff;
color: #6c757d;
left: 47px;
padding: 0 2.5px;
position: absolute;
top: 31px;
}
#cwcs .stack {
display: grid;
grid-gap: 10px;
justify-items: start;
}
.cntr {
background-color: #fff;
border: 1px solid #ced4da;
padding: 20px;
height: 160px;
}
.cont {
background-color: #fff;
border: 1px solid #ced4da;
display: block;
height: 60px;
}
.expl {
background-color: #fff;
border: 1px solid #0d6efd;
padding: 20px;
}
</style>
<p>
In CSS, I'm often confused about when an element adjusts to the width
of its container and when it adjusts to the width of its content. I made
some experiments to test the CSS behavior in various conditions. The script
to generate the experiments is
<a href="https://github.com/saltycrane/css-cheat-sheets">on github</a> and
the results are shown below. See also my companion page on
<a href="/blog/2021/01/how-height-set-css/">CSS height</a>.
</p>
<div>
By default, elements adjust to the <b>width of their container</b> when they
are
</div>
<ul>
<li><a href="#1a">block elements in block containers</a></li>
<li>elements in <a href="#4a">flex column containers</a></li>
<li>elements in <a href="#5a">grid containers</a></li>
</ul>
<div>
By default, elements adjust to <b>width of their content</b> when they are
</div>
<ul>
<li><a href="#2a">inline elements in block containers</a></li>
<li>elements in <a href="#3a">flex row containers</a></li>
<li>elements that are <a href="#6a">absolutely positioned</a></li>
<li>elements that are <a href="#7a">floated</a></li>
</ul>
<div>
Some elements can be made to adjust to the
<b>width of their container</b> by
</div>
<ul>
<li>
<a href="#2c">setting their width</a> <a href="#3c">to 100%</a> (tip: if
there are intermediate elements, their width may need to be set to 100%
also)
</li>
<li>
<a href="#3e">setting <code>flex-grow</code></a> for flex row containers
</li>
</ul>
<div>
Some elements can be made to adjust to the <b>width of their content</b> by
</div>
<ul>
<li>
<a href="#1c">using <code>fit-content</code></a> (not supported by IE)
</li>
<li>
<a href="#4c">setting <code>align-items</code></a> to something other than
<code>stretch</code> for elements in flex column containers
</li>
<li>
<a href="#5e">setting <code>justify-items</code></a> to something other
than <code>stretch</code> for elements in grid containers
</li>
</ul>
<div>
For some cases, setting <code>overflow</code> limits an element's width
to the <b>width of its container</b> for wide content:
<ul>
<li><a href="#3g">flew row container example</a></li>
<li><a href="#5d">grid container example</a></li>
</ul>
</div>
<div>
Some miscellaneous cases:
<ul>
<li>
<a href="#3f">flex row containers with <code>flex-grow</code> set</a>
expand to the width of their content for wide content
</li>
<li>
<a href="#5c">elements in grid containers</a> setting
<code>width</code> to <code>100%</code> are NOT limited by the width of
their container
</li>
<li>
setting <code>overflow</code> has no effect for
<a href="#5g">elements in grid containers</a> when
<code>justify-items</code> is set
</li>
</ul>
</div>
<h4 id="see-also">See also</h4>
<div>
<ul class="list-inline">
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"
>MDN documentation on display</a
>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"
>MDN documentation on width</a
>
</li>
<li>
<a href="https://www.w3.org/TR/css-display-3/#the-display-properties"
>CSS specification on display</a
>
</li>
<li>
<a href="https://www.w3.org/TR/css-sizing-3/"
>CSS specification on sizing</a
>
</li>
</ul>
</div>
<h4 id="block">Block containers</h4>
<div>
<div id="1a">
<b>Block containers</b> - block elements in block containers adjust to the
<b>width of their container</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-1a {
display: block; /* default */
width: 400px;
}
#example-1a {
display: block; /* default */
}
#content-1a {
width: 120px;
}
</style>
<div class="cntr" id="container-1a">
<div class="expl" id="example-1a">
<div class="cont" id="content-1a"></div>
</div>
</div>
<div class="label-cntr">#container-1a</div>
<div class="label-expl">#example-1a</div>
<div class="label-cont">#content-1a</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1a">
<div id="example-1a">
<div id="content-1a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1a {
display: block; /* default */
width: 400px;
}
#example-1a {
display: block; /* default */
}
#content-1a {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-1b {
display: block; /* default */
width: 400px;
}
#example-1b {
display: block; /* default */
}
#content-1b {
width: 420px;
}
</style>
<div class="cntr" id="container-1b">
<div class="expl" id="example-1b">
<div class="cont" id="content-1b"></div>
</div>
</div>
<div class="label-cntr">#container-1b</div>
<div class="label-expl">#example-1b</div>
<div class="label-cont">#content-1b</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1b">
<div id="example-1b">
<div id="content-1b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1b {
display: block; /* default */
width: 400px;
}
#example-1b {
display: block; /* default */
}
#content-1b {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="1c">
<b>Block containers, fit-content</b> - block elements in block containers
adjust to the width of their container by default, but can use
<code>fit-content</code> to adjust to the <b>width of their content</b>.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"
>MDN docs on <code>width</code></a
>. NOTE: <code>fit-content</code> is
<a href="https://caniuse.com/#feat=mdn-css_properties_width_fit-content"
>not supported by IE</a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-1c {
display: block; /* default */
width: 400px;
}
#example-1c {
display: block; /* default */
width: fit-content;
}
#content-1c {
width: 120px;
}
</style>
<div class="cntr" id="container-1c">
<div class="expl" id="example-1c">
<div class="cont" id="content-1c"></div>
</div>
</div>
<div class="label-cntr">#container-1c</div>
<div class="label-expl">#example-1c</div>
<div class="label-cont">#content-1c</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1c">
<div id="example-1c">
<div id="content-1c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1c {
display: block; /* default */
width: 400px;
}
#example-1c {
display: block; /* default */
width: fit-content;
}
#content-1c {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-1d {
display: block; /* default */
width: 400px;
}
#example-1d {
display: block; /* default */
width: fit-content;
}
#content-1d {
width: 420px;
}
</style>
<div class="cntr" id="container-1d">
<div class="expl" id="example-1d">
<div class="cont" id="content-1d"></div>
</div>
</div>
<div class="label-cntr">#container-1d</div>
<div class="label-expl">#example-1d</div>
<div class="label-cont">#content-1d</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-1d">
<div id="example-1d">
<div id="content-1d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-1d {
display: block; /* default */
width: 400px;
}
#example-1d {
display: block; /* default */
width: fit-content;
}
#content-1d {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="inline">Inline elements</h4>
<div>
<div id="2a">
<b>Inline elements</b> - inline elements adjust to the
<b>width of their content</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-2a {
display: block; /* default */
width: 400px;
}
#example-2a {
display: inline-block;
}
#content-2a {
width: 120px;
}
</style>
<div class="cntr" id="container-2a">
<div class="expl" id="example-2a">
<div class="cont" id="content-2a"></div>
</div>
</div>
<div class="label-cntr">#container-2a</div>
<div class="label-expl">#example-2a</div>
<div class="label-cont">#content-2a</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-2a">
<div id="example-2a">
<div id="content-2a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-2a {
display: block; /* default */
width: 400px;
}
#example-2a {
display: inline-block;
}
#content-2a {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-2b {
display: block; /* default */
width: 400px;
}
#example-2b {
display: inline-block;
}
#content-2b {
width: 420px;
}
</style>
<div class="cntr" id="container-2b">
<div class="expl" id="example-2b">
<div class="cont" id="content-2b"></div>
</div>
</div>
<div class="label-cntr">#container-2b</div>
<div class="label-expl">#example-2b</div>
<div class="label-cont">#content-2b</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-2b">
<div id="example-2b">
<div id="content-2b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-2b {
display: block; /* default */
width: 400px;
}
#example-2b {
display: inline-block;
}
#content-2b {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="2c">
<b>Inline elements, width 100%</b> - inline elements adjust to the
<b>width of their container</b> if width is set to 100%
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-2c {
display: block; /* default */
width: 400px;
}
#example-2c {
display: inline-block;
width: 100%;
}
#content-2c {
width: 120px;
}
</style>
<div class="cntr" id="container-2c">
<div class="expl" id="example-2c">
<div class="cont" id="content-2c"></div>
</div>
</div>
<div class="label-cntr">#container-2c</div>
<div class="label-expl">#example-2c</div>
<div class="label-cont">#content-2c</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-2c">
<div id="example-2c">
<div id="content-2c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-2c {
display: block; /* default */
width: 400px;
}
#example-2c {
display: inline-block;
width: 100%;
}
#content-2c {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-2d {
display: block; /* default */
width: 400px;
}
#example-2d {
display: inline-block;
width: 100%;
}
#content-2d {
width: 420px;
}
</style>
<div class="cntr" id="container-2d">
<div class="expl" id="example-2d">
<div class="cont" id="content-2d"></div>
</div>
</div>
<div class="label-cntr">#container-2d</div>
<div class="label-expl">#example-2d</div>
<div class="label-cont">#content-2d</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-2d">
<div id="example-2d">
<div id="content-2d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-2d {
display: block; /* default */
width: 400px;
}
#example-2d {
display: inline-block;
width: 100%;
}
#content-2d {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="flex-row">Flex row containers</h4>
<div>
<div id="3a">
<b>Flex row container</b> - elements in flex row containers adjust to the
<b>width of their content</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-3a {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3a {
display: block; /* default */
}
#content-3a {
width: 120px;
}
</style>
<div class="cntr" id="container-3a">
<div class="expl" id="example-3a">
<div class="cont" id="content-3a"></div>
</div>
</div>
<div class="label-cntr">#container-3a</div>
<div class="label-expl">#example-3a</div>
<div class="label-cont">#content-3a</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3a">
<div id="example-3a">
<div id="content-3a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3a {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3a {
display: block; /* default */
}
#content-3a {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-3b {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3b {
display: block; /* default */
}
#content-3b {
width: 420px;
}
</style>
<div class="cntr" id="container-3b">
<div class="expl" id="example-3b">
<div class="cont" id="content-3b"></div>
</div>
</div>
<div class="label-cntr">#container-3b</div>
<div class="label-expl">#example-3b</div>
<div class="label-cont">#content-3b</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3b">
<div id="example-3b">
<div id="content-3b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3b {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3b {
display: block; /* default */
}
#content-3b {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="3c">
<b>Flex row container, width 100%</b> - elements in flex row containers
adjust to the width of their content by default. Setting
<code>width</code> to <code>100%</code>causes them to adjust to the
<b>width of their container</b>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-3c {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3c {
display: block; /* default */
width: 100%;
}
#content-3c {
width: 120px;
}
</style>
<div class="cntr" id="container-3c">
<div class="expl" id="example-3c">
<div class="cont" id="content-3c"></div>
</div>
</div>
<div class="label-cntr">#container-3c</div>
<div class="label-expl">#example-3c</div>
<div class="label-cont">#content-3c</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3c">
<div id="example-3c">
<div id="content-3c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3c {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3c {
display: block; /* default */
width: 100%;
}
#content-3c {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-3d {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3d {
display: block; /* default */
width: 100%;
}
#content-3d {
width: 420px;
}
</style>
<div class="cntr" id="container-3d">
<div class="expl" id="example-3d">
<div class="cont" id="content-3d"></div>
</div>
</div>
<div class="label-cntr">#container-3d</div>
<div class="label-expl">#example-3d</div>
<div class="label-cont">#content-3d</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3d">
<div id="example-3d">
<div id="content-3d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3d {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3d {
display: block; /* default */
width: 100%;
}
#content-3d {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="3e">
<b>Flex row container, flex-grow</b> - elements in flex row containers
adjust to the width of their content by default. Setting
<code>flex-grow</code> to <code>1</code> causes them to expand to the
<b>width of their container</b> if their content is narrower than their
container.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow"
>MDN docs on <code>flex-grow</code></a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-3e {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3e {
display: block; /* default */
flex-grow: 1;
}
#content-3e {
width: 120px;
}
</style>
<div class="cntr" id="container-3e">
<div class="expl" id="example-3e">
<div class="cont" id="content-3e"></div>
</div>
</div>
<div class="label-cntr">#container-3e</div>
<div class="label-expl">#example-3e</div>
<div class="label-cont">#content-3e</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3e">
<div id="example-3e">
<div id="content-3e" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3e {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3e {
display: block; /* default */
flex-grow: 1;
}
#content-3e {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="3f">
If content is wider than the container, the element expands to the
<b>width of their content</b>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-3f {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3f {
display: block; /* default */
flex-grow: 1;
}
#content-3f {
width: 420px;
}
</style>
<div class="cntr" id="container-3f">
<div class="expl" id="example-3f">
<div class="cont" id="content-3f"></div>
</div>
</div>
<div class="label-cntr">#container-3f</div>
<div class="label-expl">#example-3f</div>
<div class="label-cont">#content-3f</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3f">
<div id="example-3f">
<div id="content-3f" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3f {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3f {
display: block; /* default */
flex-grow: 1;
}
#content-3f {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="3g">
<b>Flex row container, flex-grow, overflow</b> - setting
<code>overflow</code> to something other than <code>visible</code> limits
the width of the element to the <b>width of its container</b>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-3g {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3g {
display: block; /* default */
flex-grow: 1;
overflow: auto;
}
#content-3g {
width: 420px;
}
</style>
<div class="cntr" id="container-3g">
<div class="expl" id="example-3g">
<div class="cont" id="content-3g"></div>
</div>
</div>
<div class="label-cntr">#container-3g</div>
<div class="label-expl">#example-3g</div>
<div class="label-cont">#content-3g</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-3g">
<div id="example-3g">
<div id="content-3g" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-3g {
display: flex;
flex-direction: row; /* default */
justify-content: normal; /* default - behaves as flex-start in this case */
width: 400px;
}
#example-3g {
display: block; /* default */
flex-grow: 1;
overflow: auto;
}
#content-3g {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="flex-column">Flex column containers</h4>
<div>
<div id="4a">
<b>Flex column container</b> - elements in flex column containers adjust
to the <b>width of their container</b> by default
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-4a {
display: flex;
align-items: normal; /* default - behaves like stretch in this case */
flex-direction: column;
width: 400px;
}
#example-4a {
display: block; /* default */
}
#content-4a {
width: 120px;
}
</style>
<div class="cntr" id="container-4a">
<div class="expl" id="example-4a">
<div class="cont" id="content-4a"></div>
</div>
</div>
<div class="label-cntr">#container-4a</div>
<div class="label-expl">#example-4a</div>
<div class="label-cont">#content-4a</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4a">
<div id="example-4a">
<div id="content-4a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4a {
display: flex;
align-items: normal; /* default - behaves like stretch in this case */
flex-direction: column;
width: 400px;
}
#example-4a {
display: block; /* default */
}
#content-4a {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-4b {
display: flex;
align-items: normal; /* default - behaves like stretch in this case */
flex-direction: column;
width: 400px;
}
#example-4b {
display: block; /* default */
}
#content-4b {
width: 420px;
}
</style>
<div class="cntr" id="container-4b">
<div class="expl" id="example-4b">
<div class="cont" id="content-4b"></div>
</div>
</div>
<div class="label-cntr">#container-4b</div>
<div class="label-expl">#example-4b</div>
<div class="label-cont">#content-4b</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4b">
<div id="example-4b">
<div id="content-4b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4b {
display: flex;
align-items: normal; /* default - behaves like stretch in this case */
flex-direction: column;
width: 400px;
}
#example-4b {
display: block; /* default */
}
#content-4b {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="4c">
<b>Flex column container, align-items</b> - elements in a flex column
container adjust to the width of the container by default, but setting
<code>align-items</code> to something other than
<code>stretch</code> (e.g. <code>flex-start</code>), causes the element to
adjust to the <b>width of its content</b>.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items"
>MDN docs on <code>align-items</code></a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-4c {
display: flex;
align-items: flex-start;
flex-direction: column;
width: 400px;
}
#example-4c {
display: block; /* default */
}
#content-4c {
width: 120px;
}
</style>
<div class="cntr" id="container-4c">
<div class="expl" id="example-4c">
<div class="cont" id="content-4c"></div>
</div>
</div>
<div class="label-cntr">#container-4c</div>
<div class="label-expl">#example-4c</div>
<div class="label-cont">#content-4c</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4c">
<div id="example-4c">
<div id="content-4c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4c {
display: flex;
align-items: flex-start;
flex-direction: column;
width: 400px;
}
#example-4c {
display: block; /* default */
}
#content-4c {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-4d {
display: flex;
align-items: flex-start;
flex-direction: column;
width: 400px;
}
#example-4d {
display: block; /* default */
}
#content-4d {
width: 420px;
}
</style>
<div class="cntr" id="container-4d">
<div class="expl" id="example-4d">
<div class="cont" id="content-4d"></div>
</div>
</div>
<div class="label-cntr">#container-4d</div>
<div class="label-expl">#example-4d</div>
<div class="label-cont">#content-4d</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-4d">
<div id="example-4d">
<div id="content-4d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-4d {
display: flex;
align-items: flex-start;
flex-direction: column;
width: 400px;
}
#example-4d {
display: block; /* default */
}
#content-4d {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="grid">Grid containers</h4>
<div>
<div id="5a">
<b>Grid container</b> - elements in a grid container expand to the
<b>width of their container</b> if their content is narrower than their
container.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-5a {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5a {
display: block; /* default */
}
#content-5a {
width: 120px;
}
</style>
<div class="cntr" id="container-5a">
<div class="expl" id="example-5a">
<div class="cont" id="content-5a"></div>
</div>
</div>
<div class="label-cntr">#container-5a</div>
<div class="label-expl">#example-5a</div>
<div class="label-cont">#content-5a</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5a">
<div id="example-5a">
<div id="content-5a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5a {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5a {
display: block; /* default */
}
#content-5a {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="5b">
If the content is wider than the container, the element expands to the
<b>width of their content</b> instead.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-5b {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5b {
display: block; /* default */
}
#content-5b {
width: 420px;
}
</style>
<div class="cntr" id="container-5b">
<div class="expl" id="example-5b">
<div class="cont" id="content-5b"></div>
</div>
</div>
<div class="label-cntr">#container-5b</div>
<div class="label-expl">#example-5b</div>
<div class="label-cont">#content-5b</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5b">
<div id="example-5b">
<div id="content-5b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5b {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5b {
display: block; /* default */
}
#content-5b {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="5c">
<b>Grid container, width 100%</b> - elements in a grid container expand to
the <b>width of their content</b> for wide content even if width is set to
100%
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-5c {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5c {
display: block; /* default */
width: 100%;
}
#content-5c {
width: 420px;
}
</style>
<div class="cntr" id="container-5c">
<div class="expl" id="example-5c">
<div class="cont" id="content-5c"></div>
</div>
</div>
<div class="label-cntr">#container-5c</div>
<div class="label-expl">#example-5c</div>
<div class="label-cont">#content-5c</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5c">
<div id="example-5c">
<div id="content-5c" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5c {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5c {
display: block; /* default */
width: 100%;
}
#content-5c {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="5d">
<b>Grid container, overflow</b> - if content is wider than the continer,
elements in a grid container adjust to the
<b>width of the container</b> if <code>overflow</code> is set to something
other than <code>visible</code>
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-5d {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5d {
display: block; /* default */
overflow: auto;
}
#content-5d {
width: 420px;
}
</style>
<div class="cntr" id="container-5d">
<div class="expl" id="example-5d">
<div class="cont" id="content-5d"></div>
</div>
</div>
<div class="label-cntr">#container-5d</div>
<div class="label-expl">#example-5d</div>
<div class="label-cont">#content-5d</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5d">
<div id="example-5d">
<div id="content-5d" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5d {
display: grid;
justify-items: normal; /* default - behaves like stretch in this case */
width: 400px;
}
#example-5d {
display: block; /* default */
overflow: auto;
}
#content-5d {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="5e">
<b>Grid container, justify-items</b> - elements in grid containers with
<code>justify-items</code> set to something other than
<code>stretch</code> adjust to the <b>width of their content</b>.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items"
>MDN docs on <code>justify-items</code></a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-5e {
display: grid;
justify-items: start;
width: 400px;
}
#example-5e {
display: block; /* default */
}
#content-5e {
width: 120px;
}
</style>
<div class="cntr" id="container-5e">
<div class="expl" id="example-5e">
<div class="cont" id="content-5e"></div>
</div>
</div>
<div class="label-cntr">#container-5e</div>
<div class="label-expl">#example-5e</div>
<div class="label-cont">#content-5e</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5e">
<div id="example-5e">
<div id="content-5e" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5e {
display: grid;
justify-items: start;
width: 400px;
}
#example-5e {
display: block; /* default */
}
#content-5e {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-5f {
display: grid;
justify-items: start;
width: 400px;
}
#example-5f {
display: block; /* default */
}
#content-5f {
width: 420px;
}
</style>
<div class="cntr" id="container-5f">
<div class="expl" id="example-5f">
<div class="cont" id="content-5f"></div>
</div>
</div>
<div class="label-cntr">#container-5f</div>
<div class="label-expl">#example-5f</div>
<div class="label-cont">#content-5f</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5f">
<div id="example-5f">
<div id="content-5f" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5f {
display: grid;
justify-items: start;
width: 400px;
}
#example-5f {
display: block; /* default */
}
#content-5f {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div id="5g">
<b>Grid container, justify-items, overflow</b> - setting
<code>overflow</code> has no effect when <code>justify-items</code> is set
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-5g {
display: grid;
justify-items: start;
width: 400px;
}
#example-5g {
display: block; /* default */
overflow: auto;
}
#content-5g {
width: 420px;
}
</style>
<div class="cntr" id="container-5g">
<div class="expl" id="example-5g">
<div class="cont" id="content-5g"></div>
</div>
</div>
<div class="label-cntr">#container-5g</div>
<div class="label-expl">#example-5g</div>
<div class="label-cont">#content-5g</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-5g">
<div id="example-5g">
<div id="content-5g" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-5g {
display: grid;
justify-items: start;
width: 400px;
}
#example-5g {
display: block; /* default */
overflow: auto;
}
#content-5g {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="absolute">Absolute positioning</h4>
<div>
<div id="6a">
<b>Absolutely positioned</b> - when <code>position: absolute</code> is
used, the element adjusts to the <b>width of its content</b>.
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning"
>MDN docs on <code>position: absolute</code></a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-6a {
display: block; /* default */
position: relative;
width: 400px;
}
#example-6a {
display: block; /* default */
position: absolute;
}
#content-6a {
width: 120px;
}
</style>
<div class="cntr" id="container-6a">
<div class="expl" id="example-6a">
<div class="cont" id="content-6a"></div>
</div>
</div>
<div class="label-cntr">#container-6a</div>
<div class="label-expl">#example-6a</div>
<div class="label-cont">#content-6a</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-6a">
<div id="example-6a">
<div id="content-6a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-6a {
display: block; /* default */
position: relative;
width: 400px;
}
#example-6a {
display: block; /* default */
position: absolute;
}
#content-6a {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-6b {
display: block; /* default */
position: relative;
width: 400px;
}
#example-6b {
display: block; /* default */
position: absolute;
}
#content-6b {
width: 420px;
}
</style>
<div class="cntr" id="container-6b">
<div class="expl" id="example-6b">
<div class="cont" id="content-6b"></div>
</div>
</div>
<div class="label-cntr">#container-6b</div>
<div class="label-expl">#example-6b</div>
<div class="label-cont">#content-6b</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-6b">
<div id="example-6b">
<div id="content-6b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-6b {
display: block; /* default */
position: relative;
width: 400px;
}
#example-6b {
display: block; /* default */
position: absolute;
}
#content-6b {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<h4 id="float">Floated elements</h4>
<div>
<div id="7a">
<b>Floated elements</b> - elements that set <code>float</code> adjust to
the <b>width of their content</b>.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float"
>MDN docs on <code>float</code></a
>.
</div>
<div style="height: 15px; min-height: 15px;"></div>
<div class="label-overlay">
<style>
#container-7a {
display: block; /* default */
width: 400px;
}
#example-7a {
display: block; /* default */
float: left;
}
#content-7a {
width: 120px;
}
</style>
<div class="cntr" id="container-7a">
<div class="expl" id="example-7a">
<div class="cont" id="content-7a"></div>
</div>
</div>
<div class="label-cntr">#container-7a</div>
<div class="label-expl">#example-7a</div>
<div class="label-cont">#content-7a</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-7a">
<div id="example-7a">
<div id="content-7a" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-7a {
display: block; /* default */
width: 400px;
}
#example-7a {
display: block; /* default */
float: left;
}
#content-7a {
width: 120px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
<div>
<div class="label-overlay">
<style>
#container-7b {
display: block; /* default */
width: 400px;
}
#example-7b {
display: block; /* default */
float: left;
}
#content-7b {
width: 420px;
}
</style>
<div class="cntr" id="container-7b">
<div class="expl" id="example-7b">
<div class="cont" id="content-7b"></div>
</div>
</div>
<div class="label-cntr">#container-7b</div>
<div class="label-expl">#example-7b</div>
<div class="label-cont">#content-7b</div>
</div>
<div style="height: 10px; min-height: 10px;"></div>
<div class="code-row">
<pre
class="code-block"
><div class="code-label">HTML</div><div id="container-7b">
<div id="example-7b">
<div id="content-7b" />
</div>
</div></pre>
<pre class="code-block"><div class="code-label">CSS</div>#container-7b {
display: block; /* default */
width: 400px;
}
#example-7b {
display: block; /* default */
float: left;
}
#content-7b {
width: 420px;
}</pre>
</div>
<div style="height: 30px; min-height: 30px;"></div>
</div>
</div>
Customizing Bootstrap (Sass) using Grunt
2015-02-01T17:49:59-08:00https://www.saltycrane.com/blog/2015/02/customizing-bootstrap-sass-version-using-grunt-and-bower/<p><em>Update 2015-12-02: I updated the post to use npm instead of Bower
to install Bootstrap because it eliminates an extra tool and I hear
this is the preferred method.
</em></p>
<p><em>Update 2015-02-22: My co-workers informed me that
Grunt is
<a href="http://www.100percentjs.com/just-like-grunt-gulp-browserify-now/">so last year</a>
and <a href="http://gulpjs.com/">Gulp</a> is the new hotness.
You wish this post covered Gulp, but instead it covers Grunt.
</em></p>
<p>
I recently converted this blog to use Twitter's
<a href="http://getbootstrap.com/">Bootstrap</a> CSS framework to make it
<a href="http://en.wikipedia.org/wiki/Responsive_web_design">responsive</a>.
(In particular, I wanted to read it on my phone.)
I was using
<a href="http://www.blueprintcss.org/">Blueprint CSS</a>
from 2008
so it was about time for an update. Unfortunately my
design is also from 2008 but I won't update that. (Web design is hard.)
</p>
<p>
My problem was that 2014 Bootstrap's 200px gutter width didn't match
my 2008 design's 2px gutter. So I wanted to customize the gutter width.
</p>
<p>There are a few ways to customize Bootstrap. One option is
<a href="http://getbootstrap.com/customize/">creating a custom version on Bootstrap's website</a>
and downloading it for use on your site. However this doesn't allow you to
change things quickly as you develop.
Another option is overriding Bootstrap's style in your site stylesheet. However,
it's hacky to write compilcated selectors to override something in multiple
places when it is set in a single variable in Bootstrap. For example, to
change the gutter width,
<a href="https://github.com/twbs/bootstrap-sass/blob/v3.3.1/assets/stylesheets/bootstrap/_variables.scss#L325">
here is the single variable</a> that needs to be changed.
</p>
<h4 id="approach">Approach</h4>
<p>Here is the approach I took to customize Bootstrap.
I'm running Ubuntu 14.10 Utopic Unicorn 64-bit.
</p>
<ul>
<li>Install the <a href="http://getbootstrap.com/css/#sass">Sass version of Bootstrap</a>
using <a href="https://www.npmjs.com/">npm</a>.
The standard Bootstrap project uses
<a href="http://lesscss.org/">Less</a>
but my limited knowledge of frontend technology tells me
<a href="http://sass-lang.com/">Sass</a> (specifically
<a href="http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html">SCSS</a>)
is a better choice. I previously used Bower to install Bootstrap, but
I learned that
npm can now be used instead of Bower in most cases.
</li>
<li>Override Bootstrap's Sass variables, remove unneeded components, and combine
Bootstrap with my site's stylesheet using
<a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import">
Sass <code>@imports</code></a>.
</li>
<li>Compile the Sass SCSS files to CSS using
<a href="http://gruntjs.com/">Grunt</a> and
<a href="https://github.com/gruntjs/grunt-contrib-sass">
grunt-contrib-sass</a>.
</li>
<li>Commit the compiled Sass files to git. An alternative is to compile the
files as part of the deploy process. At work,
it is a pain keeping these files in git because there are many merge conflicts and
differences in build tool versions and platforms between developers.
For my blog, I am the only committer so I won't run into this.
</ul>
<h4 id="directory-structure">Project directory structure</h4>
<p>Here is what my project directory structure looks like:</p>
<pre>
my-project
├── Gruntfile.js
├── node_modules
│ ├── bootstrap-sass
│ ├── grunt
│ ├── grunt-contrib-sass
│ └── grunt-contrib-watch
├── package.json
├── sass
│ ├── _bootstrap-variables-override.scss
│ ├── _bootstrap.scss
│ └── mystyle.scss
└── static
└── css
└── mystyle.css
</pre>
<h4 id="install-sass">Install Sass</h4>
<p><a href="http://sass-lang.com/">Sass</a> is installed using
<a href="https://rubygems.org/">RubyGems</a>, the
Ruby package manager.
</a>
<pre class="console">$ sudo apt-get install ruby
$ sudo gem install sass
$ sass --version
Sass 3.4.13 (Selective Steve)
</pre>
<h4 id="install-grunt">Install grunt-cli</h4>
<p>Grunt depends on <a href="https://www.npmjs.com/">npm</a>,
the <a href="http://nodejs.org/">Node.js</a> package manager.</p>
<pre class="console">$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs
$ npm --version
1.4.28
<pre class="console">$ sudo npm install -g grunt-cli
$ grunt --version
grunt-cli v0.1.13
</pre>
<h4 id="install-bootstrap-sass">Install bootstrap-sass with npm</h4>
<p><a href="https://github.com/twbs/bootstrap-sass">bootstrap-sass</a>
is the
<a href="http://getbootstrap.com/css/#sass">official Sass port</a>
of Bootstrap.
I created this package.json file, <code>/tmp/my-project/package.json</code>.
For more information about the package.json file,
see the <a href="https://docs.npmjs.com/files/package.json">npm documentation</a>.
</p>
<pre class="json">{
"name": "my-project",
"version": "0.1.0",
"dependencies": {
"bootstrap-sass": "3.3.1"
}
}</pre>
<p>Then I ran <code>npm install</code> to download the files. The packages are stored in the
<code>node_modules</code> directory.
</p>
<pre class="console">$ cd /tmp/my-project
$ npm install </pre>
<h4 id="customize-bootstrap">Customize Boostrap</h4>
<p>To customize Boostrap, I copied the
<code>node_modules/bootstrap-sass/assets/stylesheets/<a href="https://github.com/twbs/bootstrap-sass/blob/v3.3.1/assets/stylesheets/_bootstrap.scss">boostrap.scss</a></code>
file to my <code>sass</code> directory,
removed the components that I didn't need, and added
a line for my custom variable overrides.
Here is my final file, named
<code>/tmp/my-project/sass/_bootstrap.scss</code>:
</p>
<pre class="sass">
// Variable overrides come first (without !default). Bootstrap default variables
// come second because they use !default (they won't get set if set already) and
// some of them depend on our overrides.
@import "bootstrap-variables-override";
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// // I am not using these components so I commented them out to make the CSS file smaller
// // Components
// @import "bootstrap/component-animations";
// @import "bootstrap/dropdowns";
// @import "bootstrap/button-groups";
// @import "bootstrap/input-groups";
// @import "bootstrap/navs";
// @import "bootstrap/navbar";
// @import "bootstrap/breadcrumbs";
// @import "bootstrap/pagination";
// @import "bootstrap/pager";
// @import "bootstrap/labels";
// @import "bootstrap/badges";
// @import "bootstrap/jumbotron";
// @import "bootstrap/thumbnails";
// @import "bootstrap/alerts";
// @import "bootstrap/progress-bars";
// @import "bootstrap/media";
// @import "bootstrap/list-group";
// @import "bootstrap/panels";
// @import "bootstrap/responsive-embed";
// @import "bootstrap/wells";
// @import "bootstrap/close";
// // Components w/ JavaScript
// @import "bootstrap/modals";
// @import "bootstrap/tooltip";
// @import "bootstrap/popovers";
// @import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
</pre>
<p>The Boostrap variables are located in
<code>node_modules/bootstrap-sass/assets/stylesheets/bootstrap/<a href="https://github.com/twbs/bootstrap-sass/blob/v3.3.1/assets/stylesheets/bootstrap/_variables.scss">_variables.scss</a></code>
I copied the ones that I was interested in into a <code>_bootstrap-variables-override.scss</code> file.
<strong>Be sure to remove the <code>!default</code> flag</strong> and import this file before
the default bootstrap variables. For more information about <code>!default</code>,
see the <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_">Sass documentation</a>.
Here is my <code>/tmp/my-project/sass/_bootstrap-variables-override.scss</code> file:
</p>
<pre class="sass">// overrides here (do not use !default here)
$grid-gutter-width: 10px;
$font-size-base: 16px;
$headings-font-weight: 800;</pre>
<p>In my site stylesheet, I import <code>_bootstrap.scss</code>. Here is my
<code>/tmp/my-project/sass/mystyle.scss</code> file:
</p>
<pre class="sass">@import "bootstrap";
/* add site style here */
</pre>
<h4 id="install-grunt-plugins">Install grunt plugins</h4>
<p>To compile the Sass files to CSS, I am using
<a href="https://github.com/gruntjs/grunt-contrib-sass">grunt-contrib-sass</a>.
I added a <code>devDependencies</code> section to my package.json file
which contains grunt and two grunt plugins.
Here is my <code>/tmp/my-project/package.json</code>.
For more information about installing plugins,
see the <a href="http://gruntjs.com/getting-started#package.json">Grunt documentation</a>.
</p>
<pre class="json">
{
"name": "my-project",
"version": "0.1.0",
"dependencies": {
"bootstrap-sass": "3.3.1"
},
"devDependencies": {
"grunt": "0.4.5",
"grunt-contrib-sass": "0.8.1",
"grunt-contrib-watch": "0.6.1"
}
}
</pre>
<p>I ran <code>npm install</code> again to install grunt, grunt-contrib-sass,
and grunt-contrib-watch.</p>
<pre class="console">$ cd /tmp/my-project
$ npm install </pre>
<h4 id="gruntfile">Create Gruntfile.js</h4>
<p>My Gruntfile.js uses the
<a href="https://github.com/gruntjs/grunt-contrib-sass">grunt-contrib-sass</a>
plugin to compile the Sass to CSS.
My input file is <code>sass/mystyle.scss</code> and my output file is <code>static/css/mystyle.css</code>.
I set the <code>loadPath</code> so that Sass can find the Bootstrap SCSS files in the node_modules directory to import. Alternatively, I could specify the full path to import in <code>/tmp/my-project/sass/_bootstrap.scss</code>.
For example: <code>@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";</code>
I am also using the
<a href="https://github.com/gruntjs/grunt-contrib-watch">grunt-contrib-watch</a>
plugin during development to automatically run the compilation whenever a SCSS file changes.
For more information on configuring tasks, see the
<a href="http://gruntjs.com/configuring-tasks">Grunt documentation</a>.
Here is my Gruntfile, <code>/tmp/my-project/Gruntfile.js</code>:
</p>
<pre class="javascript">module.exports = function(grunt) {
grunt.initConfig({
sass: {
// this is the "dev" Sass config used with "grunt watch" command
dev: {
options: {
style: 'expanded',
// tell Sass to look in the Bootstrap stylesheets directory when compiling
loadPath: 'node_modules/bootstrap-sass/assets/stylesheets'
},
files: {
// the first path is the output and the second is the input
'static/css/mystyle.css': 'sass/mystyle.scss'
}
},
// this is the "production" Sass config used with the "grunt buildcss" command
dist: {
options: {
style: 'compressed',
loadPath: 'node_modules/bootstrap-sass/assets/stylesheets'
},
files: {
'static/css/mystyle.css': 'sass/mystyle.scss'
}
}
},
// configure the "grunt watch" task
watch: {
sass: {
files: 'sass/*.scss',
tasks: ['sass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// "grunt buildcss" is the same as running "grunt sass:dist".
// if I had other tasks, I could add them to this array.
grunt.registerTask('buildcss', ['sass:dist']);
};</pre>
<h4 id="run-grunt">Run grunt</h4>
<p>To compile the Sass to CSS for production, I run <code>grunt buildcss</code>. This creates
the output CSS file <code>/tmp/my-project/static/css/mystyle.css</code>.
<pre class="console">$ cd /tmp/my-project
$ grunt buildcss </pre>
<p>During development, I use <code>grunt watch</code> to
build whenever a SCSS (Sass) file changes.</p>
<pre class="console">$ cd /tmp/my-project
$ grunt watch </pre>
<h4 id="notes">Other Notes</h4>
<ul>
<li>I don't commit the <code>node_modules</code> directory to git. Sass uses the Bootstrap files
in node_modules to create the final CSS file.</li>
<li>To configure Bootstrap's Javascript and glyphicons in your project, you can use
<a href="https://github.com/gruntjs/grunt-contrib-concat">grunt-contrib-concat</a>
and <a href="https://github.com/gruntjs/grunt-contrib-copy">grunt-contrib-copy</a>
as spacepope nancho <a href="#comment-2396008796">described in his comment</a>.</li>
</ul>
<h4 id="see-also">See Also / References</h4>
<ul>
<li><a href="http://ryanchristiani.com/getting-started-with-grunt-and-sass/">
Getting started with Grunt and Sass - Ryan Christiani</a></li>
<li><a href="http://www.wearejh.com/development/frontend-automation-with-grunt-sass-browsersync/">
Frontend automation with Grunt, Sass + BrowserSync.</a></li>
<li><a href="http://culttt.com/2013/11/18/setting-sass-grunt/">
Setting up Sass with Grunt | Culttt</a></li>
<li><a href="http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/">
Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass</a></li>
</ul>