CSS āĻ Grid View Layout āĻāĻŋ?
CSS āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻŋ āĻāĻ¯āĻŧā§āĻŦ āĻĒā§āĻāĻā§ āĻ°ā§-āĻāĻ˛āĻžāĻŽā§ āĻŦāĻŋāĻāĻā§āĻ¤ āĻāĻ°ā§ āĻ¯ā§ āĻ˛ā§-āĻāĻāĻ āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻž āĻšāĻ¯āĻŧ, āĻ¤āĻžāĻā§ CSS grid View Layout āĻŦāĻ˛āĻžāĻšāĻ¯āĻŧāĨ¤ āĻāĻā§āĻˇā§āĻ¤ā§āĻ°ā§ āĻāĻāĻžāĻ¨ā§ āĻā§āĻ¨ā§ āĻ°āĻāĻŽ html table, CSS float āĻāĻŦāĻ CSS Positioning āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšāĻ¯āĻŧāĻ¨āĻžāĨ¤ āĻāĻ¯āĻŧā§āĻŦ āĻĒā§āĻ āĻĄāĻŋāĻāĻžāĻāĻ¨ā§āĻ° āĻ¸āĻŽāĻ¯āĻŧ Grid āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻā§āĻŦāĻ āĻā§āĻ°ā§āĻ¤ā§āĻŦāĻĒā§āĻ°ā§āĻŖāĨ¤ āĻāĻāĻŋ āĻāĻ¯āĻŧā§āĻŦ āĻĒā§āĻā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻā§āĻ˛ā§āĻā§ āĻ¸āĻ āĻŋāĻ āĻāĻžāĻ¯āĻŧāĻāĻžāĻ¯āĻŧ āĻ¸ā§āĻĨāĻžāĻĒāĻ¨ āĻāĻ°āĻž āĻ¸āĻšāĻ āĻāĻ°ā§ āĻ¤ā§āĻ˛ā§āĨ¤ Responsive Grid View āĻ¤ā§ āĻ āĻ§āĻŋāĻāĻžāĻāĻļ āĻ¸āĻŽāĻ¯āĻŧ ā§§ā§¨ āĻāĻŋ āĻāĻ˛āĻžāĻŽ āĻĨāĻžāĻā§, ā§§ā§¨ āĻāĻŋ āĻāĻ˛āĻžāĻŽ āĻŽāĻŋāĻ˛ā§ āĻāĻ° āĻŽā§āĻ āĻĒā§āĻ°āĻ¸ā§āĻĨ āĻšāĻ¯āĻŧ ā§§ā§Ļā§Ļ% āĻāĻŦāĻ āĻāĻĒāĻ¨āĻŋ āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ°ā§āĻ° āĻāĻāĻžāĻ° āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻāĻ°āĻžāĻ° āĻ¸āĻžāĻĨā§ āĻ¸āĻžāĻĨā§ āĻāĻšāĻž āĻ¸āĻāĻā§āĻāĻŋāĻ¤ āĻ āĻĒā§āĻ°āĻ¸āĻžāĻ°āĻŋāĻ¤ āĻšāĻŦā§āĨ¤
CSS āĻ Grid View Layout āĻ¤ā§āĻ°āĻŋāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻŋ āĻāĻŋ property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧ?
CSS āĻ Grid View Layout āĻ¤ā§āĻ°āĻŋāĻ° āĻāĻ¨ā§āĻ¯ āĻ¨āĻŋāĻŽā§āĻ¨ā§āĻ° property āĻāĻŦāĻ āĻ¤āĻžāĻĻā§āĻ° value āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤
- display:gird/inline-grid
- grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
- grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
- grid-row-start: auto|row-line;
- grid-row-end: auto|row-line|span n;
- grid-row: grid-row-start / grid-row-end;
- grid-column-start: auto|span n|column-line;
- grid-column-end: auto|span n|column-line;
- grid-column: grid-column-start / grid-column-end;
- grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
- grid-auto-rows: auto|max-content|min-content|length;
- grid-auto-flow: row|column|dense|row dense|column dense;
- grid-row-gap: length;
- grid-column-gap: length;
- grid-gap: grid-row-gap grid-column-gap;
- grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
- grid-template-areas: none|itemnames;
- grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;
- grid-auto-columns: auto|max-content|min-content|length;
display:grid
html āĻāĻ° āĻā§āĻ¨ā§ parent <div> block āĻāĻ° child <div> block āĻā§āĻ˛ā§āĻā§ grid āĻāĻāĻžāĻ°ā§ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻĒā§āĻ¯āĻžāĻ°ā§āĻ¨ā§āĻ <div> āĻā§ css āĻ display:grid āĻā§āĻˇāĻŖāĻž āĻāĻ°āĻ¤ā§ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: #F06292;
margin:5px;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Output
āĻŦā§āĻ¯āĻžāĻā§āĻ¯āĻž: āĻāĻāĻžāĻ¨ā§ āĻāĻŽāĻ°āĻž grid-template-columns property āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻŽāĻžāĻĻā§āĻ° grid āĻāĻ° āĻĒā§āĻ°āĻ¤āĻŋāĻāĻŋ āĻāĻ˛āĻžāĻŽā§āĻ° size āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖ āĻāĻ°ā§āĻāĻŋāĨ¤
display: inline-grid;
CSS āĻ display: inline-grid; āĻšā§āĻŦāĻšā§ display:grid āĻāĻ° āĻŽāĻ¤ā§āĻ āĻāĻžāĻ āĻāĻ°ā§ , āĻĒāĻžāĻ°ā§āĻĨāĻā§āĻ¯ āĻšāĻā§āĻā§ display:grid āĻāĻ° āĻ āĻ§ā§āĻ¨ā§ <div> block āĻā§āĻ˛ā§ screen āĻāĻ° āĻ¸āĻžāĻĨā§ āĻ¤āĻžāĻĻā§āĻ° size automatically adjust āĻāĻ°ā§ āĻ¨ā§āĻ¯āĻŧ, āĻāĻŋāĻ¨ā§āĻ¤ā§ display: inline-grid screen āĻāĻ° āĻ¸āĻžāĻĨā§ adjust āĻāĻ°ā§āĻ¨āĻžāĨ¤āĻ āĻ°ā§āĻĨāĻžā§ fixed āĻ āĻĨāĻžāĻā§āĨ¤ āĻāĻ˛ā§āĻ¨ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: #F06292;
margin:5px;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Output
āĻŦā§āĻ¯āĻžāĻā§āĻ¯āĻž: āĻāĻāĻ¨ āĻ¯āĻĻāĻŋ āĻāĻĒāĻ¨āĻŋ āĻāĻ window āĻāĻŋ āĻā§āĻ āĻ āĻĨāĻŦāĻž āĻŦāĻĄāĻŧ āĻāĻ°ā§āĻ¨, āĻ¤āĻžāĻšāĻ˛ā§ display:grid āĻāĻ° āĻāĻāĻā§āĻŽ āĻā§āĻ˛ā§āĻ āĻā§āĻ āĻāĻŦāĻ āĻŦāĻĄāĻŧ āĻšāĻ¤ā§ āĻĨāĻžāĻāĻŦā§āĨ¤ āĻāĻŋāĻ¨ā§āĻ¤ā§ display: inline-grid; āĻāĻ° āĻā§āĻ¨ā§ āĻ§āĻ°āĻŖā§āĻ° āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻāĻ¸āĻŦā§āĻ¨āĻžāĨ¤
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻāĻ¤ āĻā§āĻ˛ā§ column āĻšāĻŦā§ , āĻāĻŦāĻ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§āĻāĻāĻŋ column āĻāĻ° āĻĄāĻŋāĻĢāĻ˛ā§āĻ āĻ¸āĻžāĻāĻ āĻāĻŋ āĻšāĻŦā§? āĻ¤āĻž āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖ
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻāĻ¤ āĻā§āĻ˛ā§ column āĻšāĻŦā§ , āĻāĻŦāĻ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§āĻāĻāĻŋ column āĻāĻ° āĻĄāĻŋāĻĢāĻ˛ā§āĻ āĻ¸āĻžāĻāĻ āĻāĻŋ āĻšāĻŦā§, āĻ¤āĻž āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖā§āĻ° āĻāĻ¨ā§āĻ¯ CSS 3 āĻ¤ā§ grid-template-columns property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖā§āĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻŦā§āĻ¯āĻžāĻĒāĻžāĻ°āĻāĻž āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px auto 200px 150px;
grid-gap: 10px;
background-color: darkcyan;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
Output
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§āĻāĻāĻŋ row āĻāĻ° āĻĄāĻŋāĻĢāĻ˛ā§āĻ āĻ¸āĻžāĻāĻ āĻāĻŋ āĻšāĻŦā§? āĻ¤āĻž āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖ
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§āĻāĻāĻŋ row āĻāĻ° āĻĄāĻŋāĻĢāĻ˛ā§āĻ āĻ¸āĻžāĻāĻ āĻāĻŋ āĻšāĻŦā§ āĻ¤āĻž āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖā§āĻ° āĻāĻ¨ā§āĻ¯ CSS 3 āĻ¤ā§ grid-template-rows property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖā§āĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻŦā§āĻ¯āĻžāĻĒāĻžāĻ°āĻāĻž āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 100px 250px 80px;
grid-gap: 10px;
background-color: teal;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
Output
āĻāĻŋāĻāĻžāĻŦā§ grid āĻāĻ° row āĻāĻ° item āĻā§āĻ˛ā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻā§āĻ¨ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ Item āĻĻāĻŋāĻ¯āĻŧā§ row āĻā§ āĻļā§āĻ°ā§ āĻāĻ°āĻŦā§āĻ¨ ?
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ row āĻāĻ° item āĻā§āĻ˛ā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻā§āĻ¨ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ Item āĻŦāĻž āĻāĻ¤ āĻ¨āĻŽā§āĻŦāĻ° Item āĻĻāĻŋāĻ¯āĻŧā§ CSS āĻāĻ° row āĻāĻŋ āĻļā§āĻ°ā§ āĻšāĻŦā§ āĻ¤āĻž āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖā§āĻ° āĻāĻ¨ā§āĻ¯ CSS āĻāĻ° grid-row-start property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻŦā§āĻā§ āĻ¨ā§āĻ¯āĻŧāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-start: 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Output
āĻāĻŋāĻāĻžāĻŦā§ grid āĻāĻ° row āĻāĻ° item āĻā§āĻ˛ā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻā§āĻ¨ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ Item āĻā§ āĻāĻāĻžāĻ§āĻŋāĻ row āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤ span āĻŦāĻž āĻŦāĻ°ā§āĻ§āĻŋāĻ¤ āĻāĻ°āĻŦā§āĻ¨?
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ row āĻāĻ° item āĻā§āĻ˛ā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻā§āĻ¨ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ Item āĻā§ āĻāĻāĻžāĻ§āĻŋāĻ row āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤ span āĻŦāĻž āĻŦāĻ°ā§āĻ§āĻŋāĻ¤ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ CSS āĻāĻ° grid-row-end property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻŦā§āĻā§ āĻ¨ā§āĻ¯āĻŧāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-end: span 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
Output
CSS grid-row-start, grid-row-end āĻāĻ āĻĻā§āĻāĻŋ property āĻāĻ° āĻā§āĻ¨ā§ short-hand property āĻāĻā§?
āĻāĻŋ āĻāĻā§ , āĻāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¨āĻžāĻā§ grid-row property āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻ° āĻāĻāĻžāĻ° syntax āĻšāĻā§āĻā§ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ :
grid-row: grid-row-start / grid-row-end;
āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
Output
grid āĻāĻ° row āĻāĻ° item āĻā§āĻ˛ā§āĻā§ āĻāĻŋāĻāĻžāĻŦā§ āĻā§āĻ¨ā§ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ column-line āĻĻāĻŋāĻ¯āĻŧā§ āĻļā§āĻ°ā§ āĻāĻ°āĻŦā§āĻ¨ ?
grid āĻāĻ° row āĻāĻ° item āĻā§āĻ˛ā§āĻā§ āĻāĻāĻāĻž āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ column-line āĻĻāĻŋāĻ¯āĻŧā§ āĻļā§āĻ°ā§ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ CSS āĻāĻ° grid-column-start property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻŦā§āĻā§ āĻ¨ā§āĻ¯āĻŧāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start: 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Output
āĻāĻŋāĻāĻžāĻŦā§ grid āĻāĻ° āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ column āĻā§ āĻāĻāĻžāĻ§āĻŋāĻ column āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤ span āĻŦāĻž āĻŦāĻ°ā§āĻ§āĻŋāĻ¤ āĻāĻ°āĻŦā§āĻ¨?
grid āĻāĻ° āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ column āĻā§ āĻāĻāĻžāĻ§āĻŋāĻ column āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤ span āĻŦāĻž āĻŦāĻ°ā§āĻ§āĻŋāĻ¤ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ CSS āĻāĻ° grid-column-end property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻŦā§āĻā§ āĻ¨ā§āĻ¯āĻŧāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-end: span 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Output
CSS grid-column-start, grid-column-end āĻāĻ āĻĻā§āĻāĻŋ property āĻāĻ° āĻā§āĻ¨ā§ short-hand property āĻāĻā§?
āĻāĻŋ āĻāĻā§ , āĻāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¨āĻžāĻā§ grid-column property āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻ° āĻāĻāĻžāĻ° syntax āĻšāĻā§āĻā§ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ :
grid-row: grid-column-start / grid-column-end;
āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
Output
grid layout āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ area specify:
grid layout āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ area specify āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ CSS 3 āĻ¤ā§ grid-template-area property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ° grid-template-area āĻāĻ° āĻ¸āĻŋāĻ¨āĻā§āĻā§āĻ¸ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ :
grid-template-areas: none|itemnames;
āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖā§āĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻŦā§āĻ¯āĻžāĻĒāĻžāĻ°āĻāĻž āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Output
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§āĻāĻāĻŋ Item āĻāĻ° āĻ¨āĻžāĻŽ āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖ:
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§āĻāĻāĻŋ Item āĻāĻ° āĻ¨āĻžāĻŽ āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖā§āĻ° āĻāĻ¨ā§āĻ¯ CSS 3 āĻ¤ā§ grid-area property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻ¤āĻž āĻāĻžāĻĄāĻŧāĻž CSS grid-row-start, grid-column-start, grid-row-end, grid-column-end āĻāĻ āĻāĻžāĻ°āĻāĻŋ property āĻāĻ° short-hand property āĻšāĻŋāĻ¸ā§āĻŦā§āĻ āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ° grid-area āĻāĻ° āĻ¸āĻŋāĻ¨āĻā§āĻā§āĻ¸ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ :
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖā§āĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻŦā§āĻ¯āĻžāĻĒāĻžāĻ°āĻāĻž āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
grid-gap: 10px;
background-color: firebrick;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Output
CSS grid-row-start, grid-column-start, grid-row-end, grid-column-end āĻāĻ āĻāĻžāĻ°āĻāĻŋ property āĻāĻ° āĻā§āĻ¨ā§ short-hand property āĻāĻā§?
āĻāĻŋ āĻāĻā§ , āĻāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¨āĻžāĻā§ grid-area property āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻ° āĻāĻāĻžāĻ° syntax āĻšāĻā§āĻā§ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ :
grid-row-start / grid-column-start / grid-row-end / grid-column-end.
āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
Output
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ row āĻā§āĻ˛ā§āĻā§ āĻāĻāĻāĻž default size āĻĒā§āĻ°āĻ§āĻžāĻ¨ :
grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ row āĻā§āĻ˛ā§āĻā§ āĻāĻāĻāĻž default size āĻĒā§āĻ°āĻ§āĻžāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¨āĻžāĻā§ grid-auto-rows property āĻāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻā§āĻˇā§āĻ¤ā§āĻ°ā§ āĻ¯āĻĻāĻŋ āĻāĻāĻ¨ā§ grid-template-rows property āĻāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨ , āĻ¸ā§āĻāĻŋ grid-auto-rows property āĻā§ override āĻāĻ°āĻŦā§āĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
.grid-container {
display: grid;
grid-auto-rows: 150px;
grid-gap: 10px;
background-color: purple;
padding: 10px;
}
.grid-container > div {
background-color: yellowgreen;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Output
CSS āĻ grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ item āĻā§āĻ˛ā§ row āĻāĻāĻžāĻ°ā§ āĻšāĻŦā§ āĻ¨āĻžāĻāĻŋ column āĻāĻāĻžāĻ°ā§ āĻšāĻŦā§, āĻ¤āĻž āĻāĻŋāĻāĻžāĻŦā§ āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻŦā§āĻ¨ ?
CSS āĻ grid āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ item āĻā§āĻ˛ā§ row āĻāĻāĻžāĻ°ā§ āĻšāĻŦā§ āĻ¨āĻžāĻāĻŋ column āĻāĻāĻžāĻ°ā§ āĻšāĻŦā§ , āĻ¤āĻž āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŖā§āĻ° āĻāĻ¨ā§āĻ¯ css āĻ grid-auto-flow property āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖā§ āĻŦā§āĻ¯āĻžāĻĒāĻžāĻ°āĻāĻž āĻŦā§āĻā§ āĻ¨ā§āĻ¯āĻŧāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-gap: 10px;
background-color: chocolate;
padding: 10px;
}
.grid-container > div {
background-color: rgb(199,21,133);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<p><strong>grid-auto-flow: column</strong></p>
<div class="grid-container" style="grid-auto-flow: column;">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<p><strong>grid-auto-flow: row</strong></p>
<div class="grid-container" style="grid-auto-flow: row;">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
</body>
</html>
Output
grid āĻāĻ° āĻĒā§āĻ°āĻ¤āĻŋāĻāĻŋ column āĻāĻŦāĻ row āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ Gap:
grid āĻāĻ° āĻĒā§āĻ°āĻ¤āĻŋāĻāĻŋ column āĻāĻŦāĻ row āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ Gap āĻĻā§āĻāĻ¯āĻŧāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¨āĻŋ āĻ¯āĻĨāĻžāĻā§āĻ°āĻŽā§ grid-column-gap āĻāĻŦāĻ grid-row-gap āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻĻāĻžāĻšāĻ°āĻŖā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
Example: grid-column-gap Property
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-column-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: #D3EAFD;
margin:5px;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Output
Example: grid-row-gap Property
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-row-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: #D3EAFD;
margin:5px;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Output
CSS grid-row-gap, grid-column-gapāĻāĻ āĻĻā§āĻāĻŋ property āĻāĻ° āĻā§āĻ¨ā§ short-hand property āĻāĻā§?
āĻāĻŋ āĻāĻā§ , āĻāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¨āĻžāĻā§ grid-gap property āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻ° āĻāĻāĻžāĻ° syntax āĻšāĻā§āĻā§ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ :
grid-gap: grid-row-gap / grid-column-gap;
āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-gap:25px 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: #D3EAFD;
margin:5px;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Output