// HTML

 <div className='container' data-columns="4">
          <div className="container__block container__block--image1"></div>
          <div className="container__block container__block--image2"></div>
          <div className="container__block container__block--image3"></div>
          <div className="container__block"></div>
      </div>




// CSS

.container{
  width: 1200px;
  height: 600px;
  margin: auto auto;
   background-color: red;
   display: grid;
  //replace the value we want to make dynamic with a var(--something, x) where x is a fallback if --something doesnt exist
  grid-template-columns: repeat(var(--column-count, 4), 1fr); 
  place-content: center;
   align-items: center;
   justify-content: center;
   justify-items: center;

   // use data attribute vales on the html to change the variable --something
   &[data-columns="2"]{
      --column-count: 2;
   }

   &[data-columns="3"]{
    --column-count: 3;
    }

    &[data-columns="4"]{
      --column-count: 4;
    }



   &__block{
    width: 200px;
    height: 200px;
    background-color: rebeccapurple;
    border: 1px solid white;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--selected-url);

        &--image1{
          --selected-url: url('https://source.unsplash.com/user/c_v_r')
        }

        &--image2{
          --selected-url: url('https://www.kimballstock.com/images/car-stock-photos.jpg')
        }

        &--image3{
          --selected-url: url('https://media.gettyimages.com/id/1636857191/photo/topshot-moto-prix-esp-catalunya-practice.jpg?s=2048x2048&w=gi&k=20&c=bt3AqEevYACDxkxf5Rom1MqE4bjHrMG2apxxTkmedJ8=')
        }


   }
 }

name: Custom document properties

description: Adds and reads custom document properties of different types.

host: WORD

api_set: {}

script:

  content: |

    $("#number").click(() => tryCatch(insertNumericProperty));

    $("#string").click(() => tryCatch(insertStringProperty));

    $("#read").click(() => tryCatch(readCustomDocumentProperties));

​

    async function insertNumericProperty() {

      await Word.run(async (context) => {

        context.document.properties.customProperties.add("Numeric Property", 14);

​

        await context.sync();

        console.log("Property added");

      });

    }

​

    async function insertStringProperty() {

      await Word.run(async (context) => {

        context.document.properties.customProperties.add("String Property", "Hello World!");
23
​

        await context.sync();

        console.log("Property added");

      });

    }

​

    async function readCustomDocumentProperties() {

      await Word.run(async (context) => {

        const properties = context.document.properties.customProperties;

        properties.load("key,type,value");

​

        await context.sync();

        for (let i = 0; i < properties.items.length; i++)

          console.log(

            "Property Name:" +

              properties.items[i].key +

              "; Type=" +

              properties.items[i].type +

              "; Property Value=" +

              properties.items[i].value

          );

      });

    }

​

    /** Default helper for invoking an action and handling errors. */

    async function tryCatch(callback) {

      try {

        await callback();

      } catch (error) {

        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.

        console.error(error);