Modèles pour afficher des photos

1°

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <h2 class="title has-text-centered">Gallery</h2>
        <div class="columns">
          <div class="column"><a href="#">
           <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                alt=""></a></div>
          <div class="column"><a href="#">
           <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                alt=""></a></div>
        </div>
      </div>
    </section>
  </div>

---

2°

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <h2 class="title has-text-centered">Gallery</h2>
        <div class="columns is-multiline">
          <div class="column is-4"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-4"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-4"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-4"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-4"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-4"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
        </div>
      </div>
    </section>
  </div>

---

3°

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <div class="columns is-vcentered">
          <div class="column is-6"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" 
			alt=""></a></div>
          <div class="column is-6">
            <h2 class="title is-spaced">Pied Piper in Photos</h2>
            <p class="block">We're all team players here at Pied Piper. 
			Even though we fight, and Richard goes crazy
              every time his tea is too strong, we really are a family.</p>
            <div class="buttons is-centered"><a class="button is-primary" 
			href="#">Join us</a></div>
          </div>
        </div>
      </div>
    </section>
  </div>

---

4°

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title is-spaced has-text-centered">Pied Piper in Photos</h2>
        <p class="subtitle">We're all team players here at Pied Piper. 
		Even though we fight, and Richard goes crazy
          every time his tea is too strong, we really are a family.</p>
        <div class="columns">
          <div class="column"><a href="#">
           <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                alt=""></a></div>
          <div class="column"><a href="#">
           <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                alt=""></a></div>
          <div class="column"><a href="#">
           <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                alt=""></a></div>
        </div>
      </div>
    </section>
  </div>

---

5°

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="columns is-vcentered">
          <div class="column">
            <h2 class="title is-spaced">Pied Piper in Photos</h2>
            <p class="subtitle">We're all team players here at Pied Piper.
			Even though we fight, and Richard goes crazy
              every time his tea is too strong, we really are a family.</p>
          </div>
          <div class="column">
            <div class="columns">
              <div class="column"><a href="#"><img
                src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
				alt=""></a></div>
              <div class="column"><a href="#"><img
                 src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
				 alt=""></a></div>
              <div class="column"><a href="#"><img
                 src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" 
				 alt=""></a></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

---