Flex Example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flex.css">
<title>CSS Flexbox Example</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
Flex.css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between; /* Distribute items along the main axis*/
align-items: center; /* Center items along the cross axis */
height: 100vh; /* Full viewport height */
padding: 10px;
}
.item {
background-color: #3498db;
color: #fff;
padding: 20px;
text-align: center;
flex: 1; /* Each item takes equal space */
margin: 0 30px; /* Add margin between items */
}
Grid Example1
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="gridstyles.css">
<title>CSS Grid Example</title>
</head>
<body>
<div class="container">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="main-content">
<section class="content">Content 1</section>
<section class="content">Content 2</section>
<section class="content">Content 3</section>
</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
Gridstyles.css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header {
grid-area: header;
background-color: #3498db;
color: #fff;
padding: 15px;
}
.sidebar {
grid-area: sidebar;
background-color: #2ecc71;
color: #fff;
padding: 15px;
}
.main-content {
grid-area: main;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
padding: 15px;
}
.content {
background-color: #ecf0f1;
padding: 20px;
border-radius: 5px;
}
.footer {
grid-area: footer;
background-color: #34495e;
color: #fff;
padding: 15px;
}
Grid Example2
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid1styles.css">
<title>CSS Grid Example</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
Grid1styles.css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
grid-gap: 10px; /* Gap between grid items */
padding: 20px;
}
.item {
background-color: #3498db;
color: #fff;
padding: 20px;
text-align: center;
border-radius: 5px;
}
