diff --git a/src/index.tsx b/src/index.tsx
index 792ae80..711a5e5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,13 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { largestRect } from 'rect-scaler'
 
+type FunctionBoxClassNameType = (child: React.ReactNode) => string;
+
+
 interface Props {
   children: React.ReactNode
   className?: string
-  boxClassName?: string
+  boxClassName?: string | FunctionBoxClassNameType
   updateLayoutRef?: React.MutableRefObject<(() => void) | undefined>
   boxAspectRatio?: number
 }
@@ -72,7 +75,7 @@ export function PackedGrid({
   className,
   boxClassName,
   updateLayoutRef,
-  boxAspectRatio
+  boxAspectRatio,
 }: Props) {
   const [layout, setNumBoxes, updateLayout] = usePackedGridLayout(
     boxAspectRatio
@@ -105,7 +108,7 @@ export function PackedGrid({
     >
       {React.Children.map(children, (child) => (
         <div
-          className={boxClassName}
+          className={typeof boxClassName === "function" ? boxClassName(child) : boxClassName}
           style={
             layout
               ? {