Scribd
Upload
5 views

Day -4 CSS Layouts

Uploaded by

btechstudentstalks
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Day -4 CSS Layouts

Uploaded by

btechstudentstalks
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Layouts & Responsive Design

Flexbox and Grid Layouts

Flexbox: Container and Item Properties

Flexbox is a layout model that allows you to align and distribute items within a container,
even when their size is unknown or dynamic.

 Flex Container Properties:


o display: flex: Makes the element a flex container.
o flex-direction: Defines the direction of the flex items (row, column).
o justify-content: Aligns items horizontally (start, center, space-between).
o align-items: Aligns items vertically (start, center, stretch).

Example HTML:

<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>

Example CSS:

.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgrey;
}

.flex-item {
background-color: steelblue;
padding: 20px;
margin: 10px;
color: white;
}

 Here, the items are spaced evenly across the container with justify-content:
space-between.

Grid: Defining Rows and Columns, Placement

Grid layout is a powerful system for creating complex layouts by defining rows and columns.

 Grid Container Properties:


o display: grid: Makes the element a grid container.
o grid-template-columns and grid-template-rows: Defines the number and
size of columns and rows.
Example HTML:

<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>

Example CSS:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal columns */
grid-template-rows: auto; /* Row size based on content */
gap: 10px;
background-color: lightgrey;
}

.grid-item {
background-color: teal;
padding: 20px;
color: white;
}

 This example creates a grid with two equal columns and places the items accordingly.

These examples should help you understand the basics of the Box Model, Flexbox, and Grid
layout in CSS.

4. Responsive Design and Media Queries

Viewport Meta Tag

The viewport meta tag is essential for responsive design as it controls the layout on mobile
browsers. It ensures that the content scales properly on different devices.

 Example HTML:

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

This tag sets the width of the page to the width of the device's screen and ensures the initial
scale is set to 1 (no zoom).

Fluid Layouts

Fluid layouts use relative units like percentages or em instead of fixed units like px to allow
the layout to resize dynamically based on the screen size.

 Example HTML & CSS:

<div class="fluid-container">
<div class="fluid-item">Item 1</div>
<div class="fluid-item">Item 2</div>
</div>

.fluid-container {
width: 100%; /* Takes full width of the viewport */
}

.fluid-item {
width: 50%; /* Each item takes 50% of the container */
float: left;
padding: 10px;
box-sizing: border-box;
}

This layout will automatically adjust its width based on the viewport size.

Media Query Syntax

Media queries are used to apply different styles based on the size of the viewport or device.
You can set specific breakpoints for different screen sizes.

 Example CSS:

@media (max-width: 768px) {


.fluid-item {
width: 100%; /* On smaller screens, each item will take full
width */
}
}

This media query applies styles to screens that are 768px wide or smaller (common for
tablets).

Breakpoints for Different Devices

Breakpoints define specific screen sizes at which the layout or style of the page should
change to ensure it looks good on various devices.

 Common Breakpoints:
o Extra small devices (phones, <576px): @media (max-width: 575px)
o Small devices (tablets, 576px - 767px): @media (min-width: 576px) and
(max-width: 767px)
o Medium devices (desktops, 768px - 991px): @media (min-width: 768px)
and (max-width: 991px)
o Large devices (large desktops, >992px): @media (min-width: 992px)

 Example CSS for Breakpoints:

/* Default for large screens */


.container {
display: flex;
}
/* Medium screens */
@media (max-width: 991px) {
.container {
display: block;
}
}

/* Small screens */
@media (max-width: 767px) {
.container {
padding: 10px;
}
}

This structure ensures that the layout adapts for different screen sizes, making your site
responsive and user-friendly on all devices.

These concepts and examples form the foundation of responsive web design using fluid
layouts and media queries.

You might also like