nnnn
n
n
n
nnnnIn this tutorial, I will build a beautiful ionic4 calculator template using css grid layout.
n
n
nArticle Objectiven
nThis tutorial shows developers how easy it became with the new CSS Grid.
n
n
nPrerequisites
nYou need to have some experience with Ionic Framework and CSS before taking this tutorial as I won’t be explaining the basics of CSS. I will only concentrate on the parts that are relevant to Grid layout.
nnnn
nIt is also recommended that you use either chrome or Firefox browser for this tutorial as they both have a great inspector that help developers during development.
n
n
n
nGetting Started
nI will start by creating a blank ionic 4 project by running the command below:
n
n
ionic start ionic4-calculator blankn
n
nOpen the project up in visual studio code, then clean up the home page in src/app/home/home.page.html.
n
n
n
nThe Layout Markup
nThe calculator has two parts – the display screen and the keypad. Let’s start by creating a basic structure. Add two divs within the ion-content of the home.page.html file like so:
n
nnnn188 x 8
nn1504
n
n
n
nSwitch to src/app/home/home.page.scss file and add the style like so:
n
n
.screen-section{ n height: 30%;n background: #fff;n padding:10% 5%; nn h1{n font-size: 4rem;n color:rgb(94, 96, 97);n }n h3{n color:#B9BBBD;n font-size: 2rem;n }nn h3,h1{ n text-align: right;n line-height: 100%;n }nnn}nn.button-section{ n height: 70%;n}nnn
n
nThe Keypad markupn
n
n
n
nAs you can see, we just have a bunch of buttons with special classes.
n
nButton Styles
nAdd the following style to the home.page.scss file to make the buttons look better.n
n
button { n background-color: #fff;n border-width: thin;n border: solid 0.5px #ECEDF4;n background-color: transparent;n font-size: 2rem;n color: #6A6D71; n }nn .operator {n color: #fff;n background: #283B50;n }nn .special-operator{n background: #F3F9FF;n } n nn .equal-sign {n background-color:#51C9CA;n border-color: #51C9CA;n color: #fff;n }nnn
nOur calculator should look like so:
n
n
n
n
nAs you can see, our calculator buttons look is better. But the buttons are not well arranged. Let’s deal with that next.
n
n
n
nArranging the buttons with CSS Grid
nThe CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. An HTML element turns to a grid container when its display property is set to grid.
nnnnn
nIn our own case, we need to set the display property of our .button-section to grid.
n
.button-section{nheight: 70%;ndisplay: grid;nn}nn
n
nBy adding that property the calculator should now look like so:n
n
n
nThe .button-section div has become grid container and the buttons are now grid items. However, we want our calculator keys to be in four columns and not stacked on each other like we currently have.nn
n
n
nDefining Columns and Rows
nTo define rows and column for a grid container we need to use the grid-template (rows or columns) in our own case we want four columns. Add the grid-template-columns property to the .button-section div like so:
n
.button-section{n height: 70%;n display: grid;n grid-template-columns: repeat(4, 1fr);n}nn
n
nHere, we’ve created four columns with each one taking 1 part of the available space. So each column will have the same width regardless of the size of the grid container. With that added our app should now look like so:n
n
n
n
nThe app is almost done, but we still have a problem, if you look at the last row you notice that we have only three buttons instead of four like the other rows. We need to make sure that the zero button takes two columns in other to fill the empty column at the bottom of the calculator. Let us do that next.nnAdd the style below to the home.page.scss file like so:nn
n
.button-section{n .zero-button {n grid-column-start: 1;n grid-column-end: 3; n }nn}nn
nFull home.page.html page codenn
n
.button-section{n .zero-button {n grid-column-start: 1;n grid-column-end: 3; n }nn}nn
n
.button-section{nnn}nn
nThe app should now look like so.
n
n
n
n
nnnnn
n
n In this article, I have shown you how easy it creating a layout with CSS Grid.
n
n Thanks for reading!.