Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Thursday 24 November 2016

Responsive Image Grid using Materialize CSS

Author:  |   |  No Comments | 

In this example, we are learning about how to make responsive image grid using materialize css.

Materialize css provide 12 column responsive grid. Here , I will describe you how it works.

Class name & Description :

  • col : specific a column with sub class.
  • s12 : Divide layout in  12 columns with width as 100% and it is also useful in small screen phones. (s is used for small screen)
  • m6 : Divide layout in 6 column out of 12 column for media screen phones. 
  • l3 : Divide layout in 3 column out of 12 column for large screen phones.
  • card small : to use small card which size is approx 300px.
  • card-image : to set an image in div
  • card - title : to set title on the card
  • card - content : to set a description about the card 
  • card-action : to set link in footer of the card


Let's see the example how it works

File name : demo.php

  1
  2
  3
  4
  5
  6
  7
  8
  9
 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
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
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
<html>
<head>
    <link rel="stylesheet" href="css/materialize.css" type="text/css">
    <script src="js/materialize.js" type="text/javascript"></script>
</head>

<body>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/1.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/2.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/3.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/4.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/5.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/6.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/7.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/8.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
</body>
</html>

Output :
Materialize Grid

, ,

0 comments:

Post a Comment

Like us on Facebook

Site Visitor

Powered by Blogger.