nurmdrafi/Float, Flexbox & Grid Layout + (Bootstrap vs Tailwind).md

## Float, Flexbox & Grid Layout + (Bootstrap vs Tailwind).md

      
    Raw
  

              Float, Flexbox & Grid Layout + (Bootstrap vs Tailwind).md
            
          
    ❄ CSS Floats Explained in Five Questions
❄ How Floats and Clears Works - Kevin Powell
❄ A Complete Guide to Flexbox
❄ CSS Flexbox Complete Guide - Bangla Tutorial - Learn With Sumit
❄ A Complete Guide to Grid
❄ CSS Grid Complete - Bangla Tutorial - Learn With Sumit
❄ Grid by Example ✔✔✔
❄ Does CSS Grid Replace Flexbox?
❄ Quick! What’s the Difference Between Flexbox and Grid?
Float

🎯 Use Case

Float is mainly used for wrap paragraph besides image, if we use float building layout it will causes unpredictable behavior
To prevent layout issue with using float, World Wide Web Consortium (W3C) introduce "Flexbox" layout

🔥 Facts

before flexbox we used float and position
position absolute/fixed elements won't float
a float does not go above the element before it in the code
if there is not enough space in the container horizontally, a float will be pushed down
all floats are made into block-level elements, trick is use 50% width for both left/right element
if width is not specified on a float, it will shrink to fit the content
the later siblings of a float will either surround them (inline & text) or wrap them (blocks)
to stop an element from wrapping a float use overflow:hidden
the parents of a float's would not increase its height to fit the float
to make a parent increase its height as per the float, use overflow:hidden
to prevent an element being near any float use the clear attribute

✔ Float Hacks

to prevent underneath issue, use overflow: hidden, overflow: auto for floated element
clear is a breakdown or new line
left/right with 50% width and bottom element always use clear:both

Flexbox

🔥 Facts

Before introducing "Flexbox" by World Wide Web Consortium (W3C) we used float and position properties for building layout
To prevent layout issue with using float, World Wide Web Consortium (W3C) introduce "Flexbox" layout
Flexbox's width is flexible but same height

Components of Flexbox


Creation: display
Direction: flex-flow (flex-direction, flex-wrap)
Alignment: justify-content, align-content, justify-items, align-items, justify-self, align-self
Ordering: order
Flexibility: flex (flex-grow, flex-shrink, flex-basis)

Flex container properties are:-

Working with flow, alignment and space distribution

flex-direction: row (default)
flex-wrap: nowrap (default)
flex-flow (shorthand): row wrap
justify-content: flex-start (default)
align-content: flex-start (default)
justify-items: stretch (default)
align-items: stretch (default)

The flexbox items will stretch across the whole cross axis.
if items has fixed height behaves like flex-start


Flex items properties are:-

Working with width and order

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Flexible Box Properties:-

display

Values includes flex and inline-flex, used on parent to create the flex container.

flex-direction

Set the containers axis for its children with
row (default) | row-reverse | column | columns-reverse, on the parent

flex-flow

Shorthand for flex-direction and flex-wrap properties.
flex-flow: row wrap;

flex

Shorthand for [flex-basis, flex-grow, and flex-shrink, or none]
Combine of three properties
If an element has flex: 1 , this means the size of all of the other elements will have the same width as their content, but the element with flex: 1 will have the remaining full space given to it.
flex: 1🔻

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;


flex-grow

Equally grow with available space based on browser window
flex-grow: 1; (default for container) [Cover extra space with items width]
flex-grow: 0; (default for children) [Don't cover extra space]

Still grow if available fixed width


flex-shrink

Opposite of flex-grow, equally shrink with available space based on browser window
flex-shrink: 1; (defualt)
default 1 due to responsiveness
if set 0, causes overflow

flex-basis
What is the point of using flex-basis?


if we use min-height instead of flex-basis, output will be same.


but the difference is, if we wrap our items, while minimizing screen items will goes down to cross axis but it causes overflow issue because of fixed min height


so using flex-basis instead of min-height is best practice


flex-basis: auto (default)


flex-basis: 100%; (single row similer with display:block;)


flex-basis: 33.33% (3 row)


flex-wrap

To determine wheter the boxes are single line or wrap, and the direction, use nowrap, wrap or wrap-reverse
flex-wrap: nowrap (default)

gap, row-gap, column-gap

Spacing only between items not on the outer edges. Only used in flex container
Gap NO NEED when using space-between, space-around and space-evenly

justify-content

flex-start (default) | flex-end | center | space-between | space-around | space-evenly

align-content

flex-start (default) | flex-end | center | space-between | space-around | stretch | space-evenly (equal space)

align-items

flex-start | flex-end | center | baseline | stretch (default)

align-self

For individual item
auto | flex-start | flex-end | baseline

min-height

Default is auto, not 0
min-height: 0; [When image is not minimize responsively]

min-width

Default is auto, not 0

order

Integer values
By default 0 and render by markup order
order: 1; will place after where 0 ends

Grid Layout

We have other options like flexbox and bootstrap but, Why should we use Grid layout❓

Grid layout provide us multi dimensional layout (main axis + cross axis)
Simpler markup
More flexible
Frameworks not needed for layout, also framework has limitations
Good Browser support

Facts 🔥

CSS Grid Layout - two-dimensional grid-based layout
Before introducing Grid Layout we used tabels, then floats, positioning and inline-block
display: flex; by default change to row layout
display: grid; by default remain same layout, untill manually setup rows and columns

Terminology
Grid lines

The vertical and horizontal lines that divide the grid and separate the columns and rows. Start counting at 1, NOT 0.

Grid cell

A single child or unit of a CSS grid.

Grid area

Any rectangular space sorrounded by four grid lines. Can contain any number of grid cells.

Grid track

The space between two grid lines. This space can be horizontal or vertical: a grid row or grid column.

Grid row

A horizontal grid track

Grid column

A vertical grid track

Gutter

Space between two rows and two columns.

fr

Fraction Unit
describes a fraction of the available space

repeat()

repeat notation
repeat(# of repeats, length)

✔ Properties

display: grid | inline-grid;

grid – generates a block-level grid
inline-grid – generates an inline-level grid


grid-template-columns: auto auto auto | 150px 150px 150px | repeat(3, 150px) | 275px repeat(2, 150px) | 100px repeat(2, 1fr) 2fr | [start] 150px 150px 150px [end];
grid-template-rows: auto auto auto | 150px 150px 150px | repeat(3, 150px) | 275px repeat(2, 150px) | 100px 1fr 2fr;
grid-template-areas: none | 

 – the name of a grid area specified with grid-area
none – no grid areas are defined


grid-template (shorthand) - A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.
grid-column-gap // old
grid-row-gap // old
grid-gap // shorthand
row-gap // shorthand
gap:  ; // new

Gap NO NEED when using space-between, space-around, and space-evenly


justify-items - applied on child items x axis

justify-items: start | end | center | stretch (default);


align-items - applied on child items y axis

align-items: start | end | center | stretch (default);


place-items - place-items sets both the align-items and justify-items properties in a single declaration.

justify-items: center;
align-items: center;
place-items: center; ✔


place-content - place-content sets both the align-content and justify-content properties in a single declaration.

justify-content: center;
align-content: center;
place-content: center; ✔


justify-content - applied on parent's x axis
align-content - applied on parent's y axis
grid-auto-flow: row | column | dense (similar to row dense) | row dense | column dense

fill up available gap with other cell


Defining a Grid

<div class="container">
	<div class="header">HEADER</div>
	<div class="menu">MENU</div>
	<div class="content">CONTENT</div>
	<div class="footer">FOOTER</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
/*OR*/
grid-template-columns: repeat(2, 1fr);
/*OR*/
grid-template: 2fr 3fr / 1fr 1fr (rows/columns)(shorthand)
/*OR*/
grid-template-columns: repeat(12, 1fr) // best practice
grid-template-rows: 50px 1fr/auto 50px
height: 100%
/*OR*/
grid-template-columns: repeat(auto-fit, 100px) // wrap behavior, if gets 100px then auto-fit or gets down and remains gap on right
// solution and best practice
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
// other example
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) // here, auto-fill creates blank cells when markup grid ends on large screen
}
Line-based placement

<div class="container">
	<div class="header">HEADER</div>
	<div class="menu">MENU</div>
	<div class="content">CONTENT</div>
	<div class="footer">FOOTER</div>
</div>
.container{
display: grid;
grid-template: 2fr 3fr / 1fr 1fr (rows/columns)
height: 100%
}

.header{
grid-template-start: 1
grid-template-end: 3 or -1
/*OR*/
grid-column: 1/3
/*OR*/
grid-column: 1/-1 // best practice
/*OR*/
grid-column: 1/span 2
}

.content{
grid-column: 2/-1
}

.footer{
grid-column: 1/-1
}
Defining Grid Areas

<div class="container">
	<div class="header">HEADER</div>
	<div class="menu">MENU</div>
	<div class="content">CONTENT</div>
	<div class="footer">FOOTER</div>
</div>
.container {
display: grid;
grid-template-areas: 
"h h h h h h h h h h h h "
"m m c c c c c c c c c c "
"f f f f f f f f f f f f "
". . f f f f f f f f f f "; // use (.) when need black grid
height: 100%;
}

.header{
grid-area: h;
}
.footer{
grid-area: f;
}
.content{
grid-area: c;
}
.menu{
grid-area: m;
}
Explicit and Implicit Grid

Undeclared rows gets auto height implicitly

we can also control auto created rows

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(1, 1fr);
grid-auto-rows: 1fr;


justify & align content

main axis

justify-content: start (default)
justify-content: center


cross axis

align-content: start (default)
align-content: center


justify & align items


main axis

justify-items: center


cross axis

align-items: center