CSS

CSS TUTORIAL IN BANGLA PART-8: CSS display inline, block, inline-block,contents and table

display:inline এর ব্যবহার

একাধিক html element কে একটা single লাইনে প্রদর্শনের display:inline ব্যবহৃত হয়। Inline Element গুলোতে আপনি left এবং right সাইড এ mergin এবং padding ব্যবহার করতে পারেন, কিন্তু top এবং bottom এ padding এবং mergin ব্যবহার করতে পারবেন না। নিচের উদাহরণ দেখুন:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: inline;
}
li{
display:inline;
padding:5px;
font-weight:bold;
cursor:pointer;
}
li:hover{
background-color:green;
color:red;
 
}
</style>
</head>
<body>
 
<p>These two paragraphs generates inline boxes, and it results in</p>
 
<p>no distance between the two elements.</p>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
 
</body>
</html>

Output

css display inline property
css display inline property

display:block

html element গুলোকে block আকারে প্রদর্শনের জন্য css এর display:block ব্যবহৃত হয়। আর html element গুলোর মধ্যে block element গুলো যেমন <p> এবং <div> tag গুলো বাই ডিফল্ট নিউ লাইনে বসে। আবার যেগুলো block element নয় সেগুলো যেমন <span> এবং <strong> ট্যাগ গুলো পাশাপাশি বসে। চলুন একটা উদাহরণ দিয়ে দেখা যাক:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<style>
li{
    display:block;
    padding:5px;
    font-weight:bold;
    cursor:pointer;
    width:100px;
}
li:hover{
    background-color:green;
    color:red;
    width:100px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>

Output

css display block property
css display block property

display:inline-block

display:Inline-block অনেকটা inline এর মতোই , পার্থক্য হচ্ছে display:Inline-block এ width এবং height কাজ করে , কিন্তু display:inline এ width এবং height কাজ করেনা। চলুন নিচের উদাহরণ দেখা যাক:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<style>
div{
    background-color:green;
    width:400px;
    height:50px;
}
li{
    display:inline-block;
    padding:10px;
    font-weight:bold;
    cursor:pointer;
    background-color:white;
}
li:hover{
    background-color:green;
    color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>

Output

css display inline block property
css display inline block property

display:contents

সরাসরি কোনো html Element, Class অথবা Id এর উপর ব্যবহৃত style কে Omit অর্থাৎ নিষ্ক্রিয় করার জন্য CSS display:contents ব্যবহৃত হয়।

প্রথমে দেখা যাক display:contents ব্যবহার ছাড়া একটা box এর Output কেমন আসে।

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<style>
.content {
  border: 2px solid #999;
  background-color: #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 400px;
}
 
.inner {
  border: 2px solid red;
  border-radius: 5px;
  padding: 10px;
}
</style>
</head>
<body>
<div class="content">
  <div class="inner">
    <p>This is the inner box. If display: contents works in your browser you will see a full width box with a red border.</p>
    <p>If display: contents does not work or if you remove the display property from .content you will see a 400 pixel box with a grey border and background color, inside will be nested the box with the red border.</p>
  </div>
</div>
</body>
</html>

Output

This is the inner box. If display: contents works in your browser you will see a full width box with a red border.

If display: contents does not work or if you remove the display property from .content you will see a 400 pixel box with a grey border and background color, inside will be nested the box with the red border.

এখন আমরা .content class এ display:contents property ব্যবহার করব , এতে আপনি দেখবেন .content class এর সব style Omit অর্থাৎ নিষ্ক্রিয় হয়ে যাবে। চলুন দেখা যাক:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<style>
.content {
  border: 2px solid #999;
  background-color: #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 400px;
  display:contents;
}
 
.inner {
  border: 2px solid red;
  border-radius: 5px;
  padding: 10px;
}
</style>
</head>
<body>
<div class="content">
  <div class="inner">
    <p>This is the inner box. If display: contents works in your browser you will see a full width box with a red border.</p>
    <p>If display: contents does not work or if you remove the display property from .content you will see a 400 pixel box with a grey border and background color, inside will be nested the box with the red border.</p>
  </div>
</div>
</body>
</html>

Output

This is the inner box. If display: contents works in your browser you will see a full width box with a red border.

If display: contents does not work or if you remove the display property from .content you will see a 400 pixel box with a grey border and background color, inside will be nested the box with the red border.

ব্যাখ্যা: লক্ষ্য করুন .content class এর সব style Omit অর্থাৎ নিষ্ক্রিয় হয়ে গেছে।

CSS দিয়ে table তৈরী

যদিও html এর table তৈরীর tag গুলো দিয়ে যেকোনো table তৈরী অনেক সহজ , তবে css এর display property ব্যবহার করে আপনি এই কাজটি আরো ভালো এবং সহজভাবে করতে পারেন। চলুন css table property ব্যবহার করে প্রথমে একটা সাধারণ 4 row * 4 column এর একটা টেবিল তৈরী করা যাক:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
    <title>CSS Display Table</title>
    <style type="text/css" media="screen">
    div{
            border:1px solid green;
        }
        .table{
            display:table;
        }
        .row{
            display:table-row;
        }
        .col{
            display:table-cell;
            height: 30px;
            text-align: center;
            padding:5px;
        }
        .caption{
            display:table-caption;
            border:none;
        }  
    </style>
</head>
<body>
 
<div class="table">
    <div class="caption"><center>CSS Table</center></div>
    <div class="row">
        <div class="col"><strong>Id</strong></div>
        <div class="col"><strong>Name</strong></div>
        <div class="col"><strong>Mobile</strong></div>
        <div class="col"><strong>Address</strong></div>
    </div>
    <div class="row">
        <div class="col">1</div>
        <div class="col">Habib</div>
        <div class="col">01788990000</div>
        <div class="col">Dhaka,Bangladesh</div>
    </div>
    <div class="row">
        <div class="col">2</div>
        <div class="col">Zahid</div>
        <div class="col">01688776699</div>
        <div class="col">Khulna,Bangladesh</div>
    </div>
        <div class="row">
        <div class="col">3</div>
        <div class="col">Rashed</div>
        <div class="col">01988776699</div>
        <div class="col">Barishal,Bangladesh</div>
    </div>
</div>
</body>
</html>

Output

CSS Table
Id
Name
Mobile
Address

1
Habib
01788990000
Dhaka,Bangladesh

2
Zahid
01688776699
Khulna,Bangladesh

3
Rashed
01666776699
Bogra,Bangladesh

ব্যাখ্যা: লক্ষ্য করুন , আমরা এখানে display:table ব্যবহার করেছি , table start করার জন্য, তারপর display:table-row ব্যবহার করেছি table এর row গুলোর জন্য এবং display:table-cell ব্যবহার করেছি table এর কলামের cell গুলো তৈরী করার জন্য , এ ছাড়া display:table-caption ব্যবহার করেছি table এর ক্যাপশন দেওয়ার জন্য।

table এর row গুলোকে column আকারে ভাগ করা :

table এর row গুলোকে column আকারে ভাগ করার জন্য আপনি display:table-column ব্যবহার করতে পারেন , চলুন দুটি উদাহরণের মাধ্যমে ব্যাপারটা বুঝে নেয়া যাক:

Table without Column Example

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
    <title>CSS Table without Extra Column</title>
    <style type="text/css" media="screen">
    div{
            border:1px solid green;
        }
        .table{
            display:table;
        }
        .row{
            display:table-row;
        }
        .col{
            display:table-cell;
            height: 30px;
            text-align: center;
            padding:5px;
        }
        .caption{
            display:table-caption;
            border:none;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="caption"><center>Table without Extra Column</center></div>
    <div class="row">
        <div class="col"><strong>Id</strong></div>
        <div class="col"><strong>Name</strong></div>
        <div class="col"><strong>Mobile</strong></div>
        <div class="col"><strong>Address</strong></div>
    </div>
    <div style="display:table-row;">
        <div class="col">1</div>
        <div class="col">Habib</div>
        <div class="col">01788990000</div>
        <div class="col">Dhaka,Bangladesh</div>
    </div>
    <div class="row">
        <div class="col">2</div>
        <div class="col">Zahid</div>
        <div class="col">01688776699</div>
        <div class="col">Khulna,Bangladesh</div>
    </div>
        <div class="row">
        <div class="col">3</div>
        <div class="col">Rashed</div>
        <div class="col">01666776699</div>
        <div class="col">Bogra,Bangladesh</div>
    </div>
</div>
</body>
</html>

Output

Table without Column
Id
Name
Mobile
Address

1
Habib
01788990000
Dhaka,Bangladesh

2
Zahid
01688776699
Khulna,Bangladesh

3
Rashed
01666776699
Bogra,Bangladesh

Table with Column Example

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
    <title>CSS Table with Extra Column</title>
    <style type="text/css" media="screen">
    div{
            border:1px solid green;
        }
        .table{
            display:table;
        }
        .row{
            display:table-row;
        }
        .col{
            display:table-cell;
            height: 30px;
            text-align: center;
            padding:5px;
        }
        .caption{
            display:table-caption;
            border:none;
        }
        .column1{
            display:table-column;
            background-color:#87CEEB;
            border:none;
        }
        .column2{
            display:table-column;
            background-color:#F44238;
            border:none;
    </style>
</head>
<body>
<div class="table">
    <div class="caption"><center>Table with Extra Column</center></div>
    <div class="column1"></div>
        <div class="column2"></div>
    <div class="row">
        <div class="col"><strong>Id</strong></div>
        <div class="col"><strong>Name</strong></div>
        <div class="col"><strong>Mobile</strong></div>
        <div class="col"><strong>Address</strong></div>
    </div>
    <div style="display:table-row;">
        <div class="col">1</div>
        <div class="col">Habib</div>
        <div class="col">01788990000</div>
        <div class="col">Dhaka,Bangladesh</div>
    </div>
    <div class="row">
        <div class="col">2</div>
        <div class="col">Zahid</div>
        <div class="col">01688776699</div>
        <div class="col">Khulna,Bangladesh</div>
    </div>
        <div class="row">
        <div class="col">3</div>
        <div class="col">Rashed</div>
        <div class="col">01666776699</div>
        <div class="col">Bogra,Bangladesh</div>
    </div>
</div>
</body>
</html>

Output

Table with Column
Id
Name
Mobile
Address

1
Habib
01788990000
Dhaka,Bangladesh

2
Zahid
01688776699
Khulna,Bangladesh

3
Rashed
01666776699
Bogra,Bangladesh

table এর row গুলোকে কে group আকারে ভাগ

table এর row গুলোকে group আকারে ভাগ করার জন্য আপনি display:table-row-group; ব্যবহার করতে পারেন , চলুন উদাহরণের মাধ্যমে ব্যাপারটা বুঝে নেয়া যাক:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
    <title>Table Row Group</title>
    <style type="text/css" media="screen">
        .table {
            display: table;
            border:1px solid green;
            width:500px;
        }
        .table-row-group {
            display: table-row-group;
        }
        .table-row {
            display: table-row;
        }
        .table-cell {
            display: table-cell;
            padding: .2em;
            border:1px solid blue;
        }
        .table-row-group:first-child {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div class="table">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">Id</div>
      <div class="table-cell">Name</div>
      <div class="table-cell">Email</div>
      <div class="table-cell">Mobile</div>
    </div>
    <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">Shanto</div>
      <div class="table-cell">shanto@mail.com</div>
      <div class="table-cell">01988339922</div>
    </div>
    <div class="table-row">
      <div class="table-cell">2</div>
      <div class="table-cell">Rashed Islam</div>
      <div class="table-cell">rashed@mail.com</div>
      <div class="table-cell">01788339922</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">Abir</div>
      <div class="table-cell">abir@mail.com</div>
      <div class="table-cell">01688339922</div>
    </div>
    <div class="table-row">
      <div class="table-cell">4</div>
      <div class="table-cell">Shahadat Hossain</div>
      <div class="table-cell">shahadat@mail.com</div>
      <div class="table-cell">01588339922</div>
    </div>
    <div class="table-row">
      <div class="table-cell">5</div>
      <div class="table-cell">Shantona</div>
      <div class="table-cell">shantona@mail.com</div>
      <div class="table-cell">01388339922</div>
    </div>
  </div>
</div>
</body>
</html>

Output

css table row group example
css table row group example

css table-header-group এবং table-footer-group এর মাধ্যমে table এর header এবং footer নির্ধারণ :

table এর এক বা একাধিক row কে header করার জন্য আপনি display:table-header-group; ব্যবহার করতে পারেন ,আবার এক বা একাধিক row কে footer করার জন্য আপনি display:table-footer-group; ব্যবহার করতে পারেন চলুন উদাহরণের মাধ্যমে ব্যাপারটা বুঝে নেয়া যাক:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
    <title>Display Table</title>
    <style>
        div{
            border:1px solid green;
        }
        .table{
            display:table;
        }
        .row{
            display:table-row;
        }
        .col{
            display:table-cell;
            height: 30px;
            text-align: center;
            padding:5px;
        }
 
        .table-header{
            display: table-header-group;
            background-color:#25764A;
            color:#fff;
            font-weight: bold;
        }
        .table-footer{
            display: table-footer-group;
            background-color: #E40061;
            font-weight: bold;
        }
   </style>
</head>
<body>
<div class="table">
    <div class="row">
        <div class="col">1</div>
        <div class="col">Habib</div>
        <div class="col">01788990000</div>
        <div class="col">Dhaka,Bangladesh</div>
    </div>
    <div class="row">
        <div class="col">2</div>
        <div class="col">Zahid</div>
        <div class="col">01688776699</div>
        <div class="col">Khulna,Bangladesh</div>
    </div>
    <div class="row">
        <div class="col">3</div>
        <div class="col">Sahid</div>
        <div class="col">01988776699</div>
        <div class="col">Khulna,Bangladesh</div>
    </div>
    <div class="table-header">
    <div class="row">
        <div class="col">Id</div>
        <div class="col">Name</div>
        <div class="col">Mobile</div>
        <div class="col">Address</div>
    </div>
    </div>
    <div class="table-footer">
    <div class="row">
        <div class="col">Id</div>
        <div class="col">Name</div>
        <div class="col">Mobile</div>
        <div class="col">Address</div>
    </div>
    </div>
</div>
</body>
</html>

Output

css table header group and footer group
css table header group and footer group

display:table ব্যবহার করে navigation menu তৈরীর কৌশল:

display:table ব্যবহার করে কিভাবে navigation menu তৈরী করা যায় নিচে তা দেখানো হলো

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
   
    <style type="text/css" media="screen">
   /* Dynamic navigation stays in middle */
 
body {
  text-align: center;
  background: #FFD34E;
  color: #FFFAD5;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
 
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
li {
  float: left;
  background-color: #BD4932;
}
 
li a {
  display: block;
  padding: .5em 1em;
  color: #FFFAD5;
}
 
.nav-table {
  display: table;
  margin: auto
}
.orange {
  color: #BD4932;
}
 
    </style>
</head>
<body>
<h2>Navigation With <span class="orange">display:table</span></h2>
<nav role='navigation' class="nav-table">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>
</body>
</html>

Output

navigation with display table
navigation with display table

display:table ব্যবহার করে Responsive Layout তৈরীর কৌশল:

display:table ব্যবহার করে কিভাবে Responsive Layout তৈরী করা যায় নিচে তা দেখানো হলো

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
   
<style type="text/css" media="screen">
   body {
    background: #FFFAD5;
    color: black;
   }
.wrapper {
  height: 100%;
  display: table;
  width: 100%;
  text-align: center;
}
.header {
  display: table-row;
  height: 100px;
  background: #FFD34E;
}
.main {
  height: 100%;
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
}
.sidebar {
  width: 20%;
  background: #BD4932;
}
.footer {
  display: table-row;
  height: 50px;
  background: #105B63;
  color: #FFFAD5;
}
/*====== Ignore section below ======*/
/* Basic Style*/
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
    </style>
</head>
<body>
<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="main">
    <div class="box sidebar">Left-sidebar</div>
    <div class="box content">Main Content</div>
    <div class="box sidebar">Right-sidebar</div>
  </div>
  <div class="footer">FOOTER</div>
</div>
</body>
</html>

Output

css responsive layout with display table property
css responsive layout with display table property

display:table ব্যবহার করে Responsive grid Layout তৈরীর কৌশল:

display:table ব্যবহার করে কিভাবে Responsive Grid Layout তৈরী করা যায় নিচে তা দেখানো হলো

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
   
<style type="text/css" media="screen">
 * { box-sizing: border-box; }
 
body{
    font-family:sans-serif;
}
 
/* Holds and centers the site content */
.container {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
}
 
 
/*
 * The Grid
 */
 
@media (min-width: 600px) {
  /* Add `.grid` for the table */
  .grid {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
 
  /* Add `.col` for the table cells, or columns */
  .col {
    display: table-cell;
  }
 
  /* Set the widths */
  .col-1 { width: 8.333333%; }
  .col-2 { width: 16.666667%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.333333%; }
  .col-5 { width: 41.666667%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.333333%; }
  .col-8 { width: 66.666667%; }
  .col-9 { width: 75%; }
  .col-10 { width: 83.333333%; }
  .col-11 { width: 91.666667%; }
  .col-12 { width: 100%; }
 
  /* Padded columns */
  .grid-padded {
    margin-left:  -1rem;
    margin-right: -1rem;
  }
  .grid-padded .grid {
    border-spacing: 1rem 0;
  }
}
 
 
/*
 * Vertically center grid content
 *
 * Requires content within the column to be inline or inline-block.
 */
 
.grid-align-middle .col {
  vertical-align: middle;
}
 
/* Make it red for easy views */
.grid-example {
  margin-bottom: 1rem;
}
.grid-example .col {
  line-height: 3;
  text-align: center;
  color: #333;
  background-color: rgba(255,0,0,.15);
}
.grid-example .col:nth-child(odd) {
  background-color: rgba(255,0,0,.3);
}
 
/* Nested grid examples need outdenting because padding. */
.grid-example .grid-example {
  margin-top: .5rem;
  margin-bottom: 0;
}
 
/* Increase height of vertically centered example */
.grid-example.grid-align-middle {
  height: 200px;
}
.grid-example.grid-align-middle .col {
  min-height: 3rem;
  line-height: 1.5;
}
    </style>
</head>
<body>
<div class="grid grid-example">
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
    <div class="col col-1">1</div>
</div>
<div class="grid grid-example">
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
</div>
<div class="grid grid-example">
    <div class="col col-3">3</div>
    <div class="col col-3">3</div>
    <div class="col col-3">3</div>
    <div class="col col-3">3</div>
</div>
<div class="grid grid-example">
    <div class="col col-4">4</div>
    <div class="col col-4">4</div>
    <div class="col col-4">4</div>
</div>
<div class="grid grid-example">
    <div class="col col-5">5</div>
    <div class="col col-7">7</div>
</div>
<div class="grid grid-example">
    <div class="col col-6">6</div>
    <div class="col col-6">6</div>
</div>
<div class="grid grid-example">
    <div class="col col-8">8</div>
    <div class="col col-4">4</div>
</div>
<div class="grid grid-example">
    <div class="col col-12">12</div>
</div>
</body>
</html>

Output

css grid layout with css display table property
css grid layout with css display table property

আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ১৫ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller, Amarbebsha Ltd সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ডেটা সাইন্স, মেশিন লার্নিং, বিগ ডেটা, ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। এছাড়াও বাংলাদেশের ১৮৫ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ১২০ এরও অধিক ছাত্র আমার হাতে জেন্ড সার্টিফাইড ইঞ্জিনিয়ার হয়েছেন। বর্তমানে w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -8.2 Engineering, Laravel Mastering Course with ReactJS, Python Beginning To Advance with Blockchain, Machine Learning and Data Science, Professional WordPress Plugin Development Beginning to Advance কোর্স করাই। আর অবসর সময়ে w3programmers.com এ ওয়েব টেকনোলজি নিয়ে লেখালেখি করি।

Leave a Reply