Images are not resizing

Question

I am making a gallery website with materializedcss. I am trying to make it so 4 images show up on each row, with them not looking so big, however with what I have written, all the images are displaying in their full size, rather than being minimzed to then be expanded via the materialboxed class. I am unsure if it is a problem with the css I have written, or through the materialboxed class from materialized, but from the jsfiddle, it seems like it is a problem with their class.

https://jsfiddle.net/ptfbkwre/

https://materializecss.com/media.html

<div id="recent">
      <div class="imagetab-grid">
        <img class="materialboxed" src="img/xjErLux.jpg" data-caption="short description. idk. image looks cool!">
      </div>
      <div class="imagetab-grid">
        <img class="materialboxed" src="img/07xoCEp.jpg" data-caption="short description. idk. image looks cool!">
      </div>
      <div class="imagetab-grid">
        <img class="materialboxed" src="img/903IrFQ.jpg" data-caption="short description. idk. image looks cool!">
      </div>
    </div>

.imagetab-grid{
  width: 25%;
  margin: 10px;
  padding: 10px;
}

.imagetab-grid>img {
  width: 100%;
}

Answer 1

Hey hope this helps I have forked your Fiddle and modified a little bit and attached the code here.

.imagetab-grid {
  box-sizing: border-box;
  width: 25%;
  padding: 5px;
  float: left;
}

.imagetab-grid img {
  width: 100%;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<div id="recent" class="row">
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://dikxrpw3rdepo.cloudfront.net/wp-content/uploads/2017/01/tbs2_ost_interior_2560x1440.png" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://preppywallpapers.com/wp-content/uploads/2019/01/header2.jpg" data-caption="short description. idk. image looks cool!">
  </div>

</div>

Reference here