CSS Tricky Concepts

**

Flex & Grid Layout Description

**
CSS Flexible Box Layout, commonly known as Flexbox which is a CSS3 web layout model. The CSS3 flexbox is used to make the elements behave predictably when they are used with different screen sizes and different display devices. It provides a more efficient way to layout, align and distribute space among items in the container. It is mainly used to make CSS3 capable of changing its item’s width and height to best fit all available spaces. It is preferred over the block model. The CSS3 flexbox contains flex containers and flex items.
Differences between Flex and grid layout-

1. A core difference between CSS3 Grid layout and Flex layout is that- CSS Grid’s approach is layout-first while Flexbox’s approach is content-first.

2.Flexbox layout is most appropriate to the components of an application cause most of them are fundamentally linear, and small-scale layouts, while the Grid layout is intended for larger-scale layouts which aren’t linear in their design.

3.CSS Grid Layout is a two-dimensional system, which means it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system so it can handle either in a column or a row.

4.If I want to define a layout as a row or a column, then I probably need a flexbox. If I want to define a grid and fit content into it in two dimensions, then I need the grid layout.

**

Using Media queries to Make a Website Responsive

**
CSS Media Queries are used to change the style of our site depending on what screen resolution or device is being used.
Media Queries can be combined to create specific scenarios for when we want to apply certain rules to that situation. This created and allowed the concept of responsive and adaptive design to work coherently in the browser.
Media query is a CSS technique introduced in CSS3. CSS Media Queries allow us to create responsive websites that look good on all screen sizes, from desktop to mobile. Media queries are used in responsive web design, which allows for a site to be viewed on a variety of screen sizes and browsers. To make the website responsive use the given steps to set up media queries.

1. Add a breakpoint
2. Always design for mobile-first
3. Another breakpoint
4. Then type choices device breakpoints
5. Set the orientation: Portrait or landscape Type-2: Answer2: Media queries are useful when we want to modify our site or app depending on a device's general type such as print vs. screen or specific characteristics and parameters such as screen resolution or browser viewport width. Media query uses the @media rule to include a block of CSS properties only if a certain condition is true. Example:
6. If Extra small devices (phones, 600px and down) then use, @media only screen and (max-width: 600px) { }

**Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) { }

***Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) { }

****Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) { }

**** Extra-large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) { }

By using this height and width with @media we can primarily fix the responsive layout. Media queries have many more media features. For example, aspect-ratio, color-gamut, color-index, grid, hover, max-aspect-ratio, max-color-index, max-height, max-width, max-resolution, orientation, hook etc. Finally, I could be told that using the above and the rest media queries features, anyone could make the website responsive.
Recommended Reading:

Udacity's - Responsive Web Design Fundamentals
MDN's - Using Media Queries
CSS Trick's - CSS Media Queries