Responsive web window

Grid is “usually” used to define your skeleton structure and flexbox “usually” for the smaller edits of content.

flex inside of grid

grid inside of a flex box

media query

/* Default styles for all screen sizes */
p {
    font-size: 16px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media (max-width: 600px) {
    p {
        font-size: 14px;
    }
}

Flexbox (display)

flex is a value for the display property.

overview1

overview2

—> flex vs. inline-flex

when you use flex, it no longer abides by inline/block/inline-block/none

When you assign display: flex; to an element, it changes the default behavior of that element and its children.

By default:

<div> elements are block-level elements, meaning they typically start on a new line and take up the full width available.
<span> elements are inline-level elements, meaning they don’t start on a new line and only take up as much width as necessary.

When you apply display: flex; to a parent element, it turns into a flex container, and its children become flex items. The flex container can then control the layout of its flex items using various flexbox properties.

.flex-container {
  display: flex;
  gap: 20px; /* This is the flex gap */
}

.flex-item {
  background-color: #f0f0f0;
  padding: 10px;
}

flexbox

flex

Flex Direction

https://www.w3schools.com/cssref/css3_pr_flex-direction.php

try to run and play with this code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Example</title>
<style>
    .container {
        display: flex;
        border: 2px solid #333;
    }

    .item {
        flex = 1;
        padding: 20px;
        border: 1px solid #000;
        margin: 10px;
    }
</style>
</head>
<body>

<h2>flex-direction: row;</h2>
<div class="container" style="flex-direction: row;">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

<h2>flex-direction: row-reverse;</h2>
<div class="container" style="flex-direction: row-reverse;">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

<h2>flex-direction: column;</h2>
<div class="container" style="flex-direction: column;">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

<h2>flex-direction: column-reverse;</h2>
<div class="container" style="flex-direction: column-reverse;">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

</body>
</html>

In this HTML document, each flex container demonstrates a different flex-direction value: row, row-reverse, column, and column-reverse. You can copy and paste this code into an HTML file and open it in a web browser to see the visual layout changes produced by each flex-direction value.

flex basis has to go on to the child not on the container

In Flexbox, certain properties are applied to the flex container, while others are applied to the flex items. Here’s a breakdown:

Properties for the Flex Container:

display: Specifies the container as a flex container. Use display: flex; or display: inline-flex; on the container element.
flex-direction: Defines the direction in which flex items are placed in the flex container. Options include row, row-reverse, column, and column-reverse.
flex-wrap: Determines whether flex items are forced onto a single line or can wrap onto multiple lines. Options include nowrap, wrap, and wrap-reverse.
justify-content: Aligns flex items along the main axis of the flex container. Options include flex-start, flex-end, center, space-between, and space-around.
align-items: Aligns flex items along the cross axis of the flex container when they do not take up all the available space. Options include flex-start, flex-end, center, stretch, and baseline.
align-content: Aligns a flex container’s lines within the flex container when there’s extra space in the cross axis. Options are similar to align-items.

Properties for the Flex Items:

flex: Shorthand for flex-grow, flex-shrink, and flex-basis. It specifies how a flex item will grow, shrink, and its initial size.
flex-grow: Specifies the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally among the items.
flex-shrink: Specifies the ability for a flex item to shrink if necessary.
flex-basis: Specifies the initial main size of a flex item before additional space is distributed according to flex-grow and flex-shrink.
order: Specifies the order in which a flex item appears in the flex container. By default, all flex items have an order of 0, but this property allows you to change the order.
align-self: Allows the default alignment set by align-items to be overridden for individual flex items. It accepts the same values as align-items.

Flex Layout

https://appbrewery.github.io/flex-layout/

align-self: flex-start

it makes this item separate from the group things to do its own thing

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex Size

content width < width < flex-basis < min-width/max-width

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width Properties Example</title>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 1px solid #ccc;
      padding: 20px;
      margin-bottom: 20px;
    }
    
    .item {
      background-color: #f0f0f0;
      padding: 10px;
      margin: 5px;
    }

    /* Set different width properties */
    .content-width {
      /* Default value */
    }
    
    .width {
      width: 200px;
    }
    
    .flex-basis {
      flex-basis: 150px;
    }
    
    .min-max-width {
      min-width: 100px;
      max-width: 300px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item content-width">Content Width</div>
  </div>
  
  <div class="container">
    <div class="item width">Width</div>
  </div>
  
  <div class="container">
    <div class="item flex-basis">Flex Basis</div>
  </div>
  
  <div class="container">
    <div class="item min-max-width">Min-Max Width</div>
  </div>
</body>
</html>

Content Width (content-width):
- The .content-width class doesn’t have any specific width properties applied to it. Therefore, its width is determined solely by the content it contains. This is the default behavior of block-level elements like <div>.
- In the example, the .content-width item will expand or shrink based on the width of the content inside it, along with any padding and margins applied to it.
Width (width):
- The .width class sets a fixed width of 200 pixels for the .item element. This overrides the default content width and any other sizing properties.
- In the example, the .width item will always have a width of 200 pixels, regardless of the content it contains or the space available within its container.
Flex-Basis (flex-basis):
- The .flex-basis class sets the initial main size of the .item element to 150 pixels when it’s used within a flex container. This property behaves similarly to width, but it’s specific to flex items.
- In the example, the .flex-basis item will initially have a width of 150 pixels within the flex container. However, it can still grow or shrink based on the available space and the flex layout algorithm.
Min-Width and Max-Width (min-width and max-width):
- The .min-max-width class sets constraints on the width of the .item element, ensuring it doesn’t become narrower than 100 pixels and wider than 300 pixels.
- In the example, the .min-max-width item will have a width that adapts to its content if it’s less than 100 pixels wide. However, it won’t shrink below 100 pixels due to the min-width constraint. Similarly, it won’t expand beyond 300 pixels due to the max-width constraint.

flex grow flex shrink

https://www.freecodecamp.org/news/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053/

Flex-shrink: This property controls how much a flex item can shrink relative to the rest of the flex items when there’s not enough space in the flex container. By default, the value is 1, meaning the item can shrink to prevent overflow.
flex-shrink: 0: This explicitly disables shrinking for the flex item. It tells the browser not to allow the item to shrink, regardless of the available space and the shrinking potential of other flex items.

Let’s break down flex: 1 1 0 :

flex-grow: This property determines how much the flex item can grow relative to other flex items within the same flex container when there is extra space available. In the case of flex: 1 1 0, flex-grow is set to 1, meaning the item will grow proportionally to other items with a flex-grow value of 1. If all items in the flex container have the same flex-grow value, they will grow equally to fill the available space.
flex-shrink: This property determines how much the flex item can shrink relative to other flex items when there isn’t enough space in the flex container. Again, in flex: 1 1 0, flex-shrink is set to 1, indicating that the item can shrink proportionally to other items with a flex-shrink value of 1. If all items have the same flex-shrink value, they will shrink equally to prevent overflow or wrapping.
flex-basis: This property defines the initial size of the flex item before any extra space is distributed among flex items. In flex: 1 1 0, flex-basis is set to 0. This means the initial size of the item will be determined solely by its content and any constraints imposed by min-width and max-width. Setting flex-basis to 0 allows the flex container to distribute space evenly among flex items based on their flex-grow and flex-shrink values without considering their initial sizes.

https://appbrewery.github.io/flexbox-sizing-exercise/

answer:

CSS grid

flex vs grid

https://appbrewery.github.io/grid-vs-flexbox/

grid display

the grid will try to take up the full width of the screen so we need to set the width to 800 px, otherwise when the window is larger there will be gap between columns.

grid sizing

its eqaul to :

grid-template: 100px 200px / 400px 800px;

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto; /* Three columns with equal width */
    /* Other grid properties */
}

.item {
    /* Styles for grid items */
}

In this example:

grid-template-columns: auto auto auto; sets up a grid container with three columns, each with a width determined by the content inside it. The “auto” keyword tells the browser to automatically size the columns based on the content within them.
Each “auto” column will expand to fit its content. If one column has more content than another, it will expand accordingly.

when you use auto on a row, it’s going to fit the content

while you use auto on columns, it’s going to fit the 100% width

grid sizing: https://appbrewery.github.io/grid-sizing/

gractional size:

MinMaz size

wont wont be bigger than 800 px and wont be smaller than 400px

repeat

the extra one will get an automatic size based on its height and also any existing column size. it will match with the existing column size

create a new row that doesnt fit in the grid, then give it a 300 px of the height

Grid Placement

Grid Container -> div
tracks

cells

lines

exmaple

if you don’t set the height to 100 vh, the height will be automatically sett according to the content.

we dont need to use margin or padding to separate the grids because we have gap : 3 rem;

use FlexBox to align item in the center of each grid!

justify-content, align-items

justify-content:
- This property aligns flex items along the main axis of the flex container.
- It controls how flex items are spaced out or distributed along the main axis.
- Values for justify-content include flex-start, flex-end, center, space-between, and space-around, among others.
- For a flex container with a horizontal main axis, justify-content will control horizontal alignment.
- Example: justify-content: center; will center flex items along the main axis.
align-items:
- This property aligns flex items along the cross-axis of the flex container.
- It controls how flex items are positioned along the perpendicular axis to the main axis.
- Values for align-items include flex-start, flex-end, center, baseline, and stretch.
- For a flex container with a horizontal main axis, align-items will control vertical alignment.
- Example: align-items: center; will center flex items along the cross axis.

grid-column

mdn web docs

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* Three columns each 100px wide */
}

.grid-item {
  grid-column-start: 2;
  grid-column-end: span 2; /* Spanning across 2 columns */
}

In this example:

The grid item starts at the second column line (grid-column-start: 2) in the grid layout.
It spans across two columns (grid-column-end: span 2), covering both the second and third columns in the grid.

grid-row

the same with grid-column

grid -order

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* Three columns each 100px wide */
  grid-template-rows: auto;
}

.grid-item {
  /* By default, grid items have an order value of 0 */
}

.grid-item:nth-child(2) {
  order: 3; /* This grid item will be displayed third, regardless of its source order */
}

In this updated example:

All .grid-item elements have a default order value of 0, meaning they will be displayed in their source order.
The .grid-item:nth-child(2) selector targets the second grid item and sets its order to 3. This means it will be displayed third within the grid container, overriding its default order.

another way:

equal to:

grid-area

The values you provided, grid-area:2/1/3/4, represent the grid area using four line numbers: row-start / column-start / row-end / column-end.

Let’s break it down:

The first value, 2, represents the starting row line.
The second value, 1, represents the starting column line.
The third value, 3, represents the ending row line.
The fourth value, 4, represents the ending column line.

overlapping layout

grid lletsyou overlay items, but flex box doesn’t allow you to do so

bootstrap framework

it’s an external layout system 🥰

how to use bootstrap?

https://getbootstrap.com/docs/5.2/getting-started/introduction/

make sure your custom css occurs below the bootstrap link, so the custom css can override the bootstrap

CDN links

As reference, here are our primary CDN links.

Description	URL
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js`

CDN stands for Content Delivery Network.

Imagine you want to share a big cake with your friends at a party. Instead of bringing the whole cake to each friend individually, you cut it into slices and give each friend a slice.

A CDN is like having multiple friends with slices of cake all around the party. When someone wants a slice, they can get it from the friend closest to them instead of waiting for you to bring it from the kitchen. This makes sure everyone gets cake faster and nobody has to wait too long.

In the same way, a CDN has servers (like friends with cake slices) spread out in different places. When you want to access a website or its content, the CDN finds the closest server to you and gives you the content from there. This makes websites load faster for you, no matter where you are.