Cruise across the Bay of Plenty and explore the inner crater of New Zealand’s most active volcano, Whakaari/White Island. Often described as a once in a lifetime trip and the highlight of a holiday spent in New Zealand, this is not to be missed! Experience roaring fumaroles, amazing colours and the sense of awe you get by stepping foot onto a live volcano!
Each column inside the grid is automatically assigned an equal share of the total. The columns are built to respect the layout over the content.
<div class='grid'>
<div class='col'>
Auto Column
</div>
<div class='col'>
Auto Column
</div>
<div class='col'>
Auto Column
</div>
</div>
The padding is built into the grid but can be removed with a modifier class. The padding itself is based on the
8 point grid system
but can be modified in the
variables
file.
<div class='grid grid-nogutter'>
<div class='col'>
Auto Column
</div>
<div class='col'>
Auto Column
</div>
<div class='col'>
Auto Column
</div>
</div>
Based on the familiar n/12 column system.
<div class='grid'>
<div class='col col-3'>
25% (3/12)
</div>
<div class='col col-9'>
75% (9/12)
</div>
</div>
Based on
flex-grow
this layout style allows for dynamic content distribution. These columns will respect their given ratio and resist dropping onto a second row unlike a percentage based column.
<div class='grid'>
<div class='col col-grow-3'>
Grow 3 Columns
</div>
<div class='col'>
Auto Column
</div>
</div>
Add in the fixed column class and pass the column a defined width or allow content like an image to dictate the desired width. It’s recommended to fill the space with dynamic flex columns however you can mix in percent based columns too. Utilizing a fixed column with only percent based columns will make it difficult to reach 100%.
<div class='grid'>
<div class='col col-fixed' style='width:168px;'>
col col-fixed
</div>
<div class='col'>
col
</div>
<div class='col'>
col
</div>
</div>
This is the real power of flexbox at work in your layouts.
<div class='grid'>
<div class='col col-fixed' style='width:168px;'>
Fixed Column
</div>
<div class='col col-grow-2'>
Grow 2 Column
</div>
<div class='col'>
Auto Column
</div>
<div class='col col-3'>
25% (3/12)
</div>
</div>
Vertically align the content inside of a column.
<div class='grid'>
<div class='col col-top' style='height:96px;'>
Content aligned to top
</div>
<div class='col col-middle' style='height:96px;'>
Content aligned to middle
</div>
<div class='col col-bottom' style='height:96px;'>
Content aligned to bottom
</div>
</div>
Columns alignment relative to each other inside of the
.grid
container.
<div class='grid'>
<div class='col col-align-top'>
Top Aligned Column
</div>
<div class='col col-align-middle'>
Middle Aligned Column
</div>
<div class='col col-align-bottom'>
Bottom Aligned Column
</div>
<div class='col' style='height:112px;'>
Tall Column
</div>
</div>
Apply modifier classes to the
.grid
element to change the alignment of columns.
<div class='grid grid-end'>
<div class='col col-6'>
Aligned to the end
</div>
</div>
Distribute space around or between columns equally.
<div class='grid grid-between'>
<div class='col col-3'>
Equal space between columns
</div>
<div class='col col-3'>
Equal space between columns
</div>
<div class='col col-3'>
Equal space between columns
</div>
</div>
Change the order of columns by using the modifier classes
.col-first
to move a column to the first position or
.col-last
to move it to the last position.
<div class='grid'>
<div class='col col-last'>
1st Column
</div>
<div class='col'>
2nd Column
</div>
<div class='col'>
3rd Column
</div>
</div>
Use
.grid-reverse
to reverse the order of all columns.
<div class='grid grid-reverse'>
<div class='col'>
1st Column
</div>
<div class='col'>
2nd Column
</div>
<div class='col'>
3rd Column
</div>
</div>
Grids nest easily with no cascading conflicts. Great for complex layouts.
<div class='grid'>
<div class='col'>
Auto Column
<div class='grid'>
<div class='col'>
Nested Inside
</div>
<div class='col'>
Nested Inside
</div>
</div>
</div>
<div class='col'>
Auto Column
</div>
</div>
Media breakpoint classes define the screen size a column should go to 100%. The small
.col-sm
snaps to 100% at 480px,
.col-md
at 624px, and
.col-lg
at 744px. The breakpoint classes will overwrite any other percentage or grow based modifier class. Nesting grids can create more complex responsive layouts.
<div class='grid'>
<div class='col'>
Auto Column
</div>
<div class='col'>
Auto Column
</div>
<div class='col'>
Auto Column
</div>
</div>
My husband and I have just done the early morning sunrise tour. It was a very special experience for us and we would highly recommend it to everyone.WendyG84
Whakatane, New Zealand
He gave us an informative and interesting talk about the carvings, and the history of Ngati Porou - both distant and recent. Everyone in the group was very impressed.8Hazel8
Auckland, New Zealand
At the site of the phenomenal carvings, Monty shared the stories of Ngati Porou - just fascinating. The picnic was delicious and elegantly presented. A most excellent adventure for visitors from far and near.Elisabeth E
Auckland, New Zealand
Meet Irawhaaki - Maui’s father. In other versions of the Maui stories he was also known as Makeatutara. It was Irawhaaki’s mistake in performing karakia upon Maui that was to render him mortal and lead to his ultimate demise at the hands of Hinenui-te-po, the goddess of the spiritual realm. Book your tour now to learn about the story of all nine carvings https://maungahikurangi.com/experiences/
Aside from the beautiful views and landscape, our tours also offer a taste of local cuisine and produce. Lunch for our Haramai Day tours include kumara salad, kangawaru (a sweetbread made from kumara, corn grit and flour), fruit and juice is a welcome bite after pushing to the top of our maunga! Book your tour today 🥪🌱https://maungahikurangi.com/experiences/
🌟 Meet the Grandmother of Maui, ‘Te Kauwae o Murirangawhenua`, whose magical jawbone features in many stories—from slowing the sun to fishing up the North Island (Te Ika a Maui). Don’t miss the chance to experience this rich heritage! Book your tour today to connect with our stories and breathtaking landscapes at www.maungahikurangi.com. 🌊🛶
Be one with Maui, his people, land sea & sky. Maui Tikitiki-a-Taranga the person who slowed down the sun, the person who brought us fire, the person who fished up Aotearoa from the sea, come hear his story, come see his lands, meet this people and feel his presence through his descendants, Ngati Porou.
Each of our nine breath-taking carvings has a unique story to tell, and each of those stories is an important piece in the overarching legend of Maui, a founding member of the Ngati Porou tribe. Here is Hine-rau-ma-ukuuku, a wife of Maui. Hinerau has the significant responsibility of welcoming all manuhiri (visitors) to our sacred maunga. Her warmth radiates even on a misty morning, as you climb to the top to greet the sun ☀
Happy New Year! While each and every sunrise is a magical moment we never get tired of, there’s something extra special about the first sunrise of the year, a sign of a prosperous and fulfilling year ahead 👐☀🌄
#tairawhitigisborne #maungahikurangi #mthikurangi #firstlight #gisborne #sunrise #aotearoa #newzealand #nzmustdo #happynewyear
