/* Flex Container (Parent Element) */
.flex container {
display: flex; /* Establishes a flex container */
/* Main properties for flex container*/
justify-content: space-evenly; /* Aligns flex items along the main axis */
align-items: center; /* Aligns flex items along the cross axis */
align-items: center; /* Aligns flex items along the cross axis */
The align-items property aligns items on the cross axis. For example, if you have a flex container with display: flex and a vertical direction, this property will control the alignment of items vertically within it.
/* Optional properties for flex container*/
flex-direction: row;/* Defines the direction of flex items (row, column, etc.) */
flex-wrap: wrap; /* Allows flex items to wrap onto multiple lines */
flex-flow: column; /* Shorthand for flex-direction and flex-wrap */
align-content: stretch; /* Aligns lines of flex items within the flex container */
}
.flex child {
/* Optional properties for flex item *child of flex* */
align-self: center; /* Allows a single flex item to align itself independently */
order: 2; /* Changes the order of the flex item */
flex-basis: auto; /*default size "width" before applying "flex-grow" or "flex-shrink" */
flex-grow: 2; /*grow based on flex-basis */
flex-shrink: 2; /*shrink based on flex-basis */
flex: 1 0 5em; /* flex: flex-grow flex-shrink flex-basis *Shorthand* */
}
.grid {
/* Grid container *parent element* */
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
); /* to get responsive, works with grid-template-columns and grid-template-rows */
grid-template-columns: repeat(
3,
1fr
); /* values for columns can be put in different units or mixed ways of defining them. */
grid-template-columns: 22% 22% 22%; /* create columns, the number of values passed represent
the number of columns created, and their size. */
grid-template-areas:
"header header header"
"nav main sidebar"
"nav footer"; /* works with grid-template-columns and grid-template-rows, the name repetition is
meaning of spreading // reference , crash course Traversy media for grid */
width: clamp(200px, 50%, 600px); /* min, preferred, max */
justify-content: center; // just like flexbox
align-items: center; //just like flexbox
gap: 10%; // works as a margin, work also in flexbox
grid-auto-flow: column; // get content to fill the width, just like flexbox do by default
grid-auto-rows: minmax(
10em,
auto
); /* sets the height of columns, can work as height or if used with minmax(), can be as a min-height */
grid-template-rows: auto; /* works the same as grid-template-columns,
the height is the height of the rows with the most content. */
}
.parent {
display: grid;
/* Optional properties for grid container*/
display: grid;
grid-template-columns: auto;
grid-template-rows: max-content;
grid-gap: 0ch;
grid-auto-rows: min-content;
grid-auto-columns: minmax();
grid-template-areas: calc();
justify-content: center;
align-items: center;
}
.child {
/* Optional properties for grid item *child of grid* */
grid-column: auto ;
grid-row: span ;
grid-area: auto ;
align-self: center ;
justify-self: auto ;
}
.a {
max-width: 5em;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
align-self: center ; /* just like flexbox */
justify-self: end ; /* just like align-self */
&:nth-child(1) {
/* spread a column to go over more columns */
/* same way with */
grid-row-start: auto ;
grid-row-end: auto ;
grid-row: auto;
/* Example */
grid-column-start: 1;
grid-column-end: 4; /* number should be bigger than 2 */
grid-column: 1 / 3; /* shorthand */
}
}