css 計算屬性的應用

by Deepika Gunda

由Deepika Gunda

如何使用一點CSS Grid魔術設計計算器應用 (How to use a little CSS Grid magic to design a calculator app)

This article is a quick intro to CSS Grid. We will be making a calculator using it.

本文是CSS Grid的快速介紹。我們將使用它來制作一個計算器。

This article is good for developers who have a basic understanding of CSS and for those who want to learn the newer tools CSS offers to style pages.

本文適合對CSS有基本了解的開發人員，以及想要學習CSS為樣式頁面提供的較新工具的開發人員。

I liked CSS Grid area templates from the very start! The examples all over the web can look complicated, but trust me, one attempt at using them and you will love them and use them in many of your projects.

我從一開始就喜歡CSS Grid區域模板！網絡上的示例看起來很復雜，但是請相信我，嘗試使用它們，您會喜歡它們并在許多項目中使用它們。

This thought started after wanting to make something similar to the image below.

這個想法始于想要做出類似于下圖的內容。

Note that the =, 0, and AC buttons are twice in size of regular buttons. At first I thought of using the table HTML element and colspan and rowspan to make this. But then I wondered if we could make it using CSS Flexbox. After failing to place the = and 0 and . in the same row, I began to realize the need for CSS Grid.

請注意，=，0和AC按鈕的大小是常規按鈕的兩倍。最初，我想到了使用表格HTML元素以及colspan和rowspan來實現這一點。但是后來我想知道我們是否可以使用CSS Flexbox做到這一點。未能放置=和0和之后。在同一行中，我開始意識到對CSS Grid的需求。

The complete code for this is available here: CSS-Grid-Calculator.

此處提供了完整的代碼： CSS-Grid-Calculator 。

什么是CSS網格？ (What is CSS Grid?)

The 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. — from my fav w3schools.com
CSS網格布局模塊提供了具有行和列的基于網格的布局系統，從而使設計網頁變得更加容易，而不必使用浮動和定位。 —來自我的最愛w3schools.com

So I would assume the main layout and table-like content look like grids, so we can use CSS Grid to style them.

因此，我假定主布局和類似表格的內容看起來像網格，因此我們可以使用CSS Grid設置樣式。

制作網格的第一件事 (First thing to make a grid)

We have to use the display:grid on any container which needs to be a grid. In case it is the whole main page of website, we can do it like this:

我們必須在需要為網格的任何容器上使用display：grid。如果它是網站的整個主頁，我們可以這樣做：

<html>

<style> #main{       display:grid;     }

</style>

<body><div id="main"></div>

</body></html>

下一步是什么？ (What’s next?)

Let’s say you want to make a website which has a navbar, right sidebar, left sidebar, and middle portion for content. Typically you would want the navbar and sidebars to have fixed width and height in terms of viewport percentages and the content portion to expand in whatever space is left.

假設您要制作一個包含導航欄，右側，左側和中間部分內容的網站。通常，您會希望導航欄和側邊欄在視口百分比方面具有固定的寬度和高度，并且內容部分要在剩余的空間中擴展。

So how do we do that?

那么我們該怎么做呢？

<style>#main{ display:grid; grid-template-columns: 20vw auto 20vw; grid-template-rows: 15vh auto; grid-template-areas:"header header header"                     "leftSB content rightSB";

}#header{ grid-area:header;}#leftSB{  grid-area:leftSB;}#rightSB{  grid-area:rightSB;}#content{grid-area:content;}

</style><body> <div id="main">   <div id="header>header</div>   <div id="rightSB">right sidebar</div>   <div id="leftSB">left sidebar</div>   <div id="content">content</div> </div>

</body>

Here is what achieves the layout we needed.

這就是實現我們所需布局的方法。

詳細說明 (Detailed explanation)

In the picture above, you can see that we just needed to create simple divs which hold our header, sidebars, and content and add it to the root.

在上面的圖片中，您可以看到我們只需要創建簡單的div，即可保存標題，側邊欄和內容并將其添加到根目錄中。

In the style section, we have added “display:grid” for the main container.

在樣式部分，我們為主容器添加了“ display：grid”。

Next, we can see that overall we need 2 rows and 3 columns. That is why we have added the line

接下來，我們可以看到總體上我們需要2行和3列。這就是為什么我們添加了這一行

grid-template-columns: 20vw auto 20vw;

We are telling it that we need 3 columns, and that the first column should occupy 20% of the view’s width, that the next column is auto (that is all the space available to be taken by this column), and that the last column is again 20% of view’s width.

我們告訴它，我們需要3列，并且第一列應該占據視圖寬度的20％，下一列是自動的(即該列可以使用的所有空間)，最后一列還是視圖寬度的20％。

grid-template-rows: 15vh auto;

We are here saying that we need two rows overall. The first row will be used for a header and it will be 15% of viewport height, and the remaining space is needed for the second row.

我們在這里說，我們總共需要兩行。第一行將用作標題，它將是視口高度的15％，第二行需要剩余空間。

Now comes grid-template-areas. Here we define in simple names what will occupy the grid. Let’s say we want the header to take the whole first row and there should be no divisions. Then we use the following:

現在是網格模板區域。在這里，我們以簡單的名稱定義將占用網格的內容。假設我們希望標題占據整個第一行，并且不應有任何分隔。然后我們使用以下內容：

grid-template-areas:"header header header"

Because we have 3 columns, we need to mention header 3 times. By using the same name, the outcome will be a unified header region.

因為我們有3列，所以我們需要提到標題3次。通過使用相同的名稱，結果將是統一的標頭區域。

grid-template-areas:"header header header"                     "leftSB content rightSB";

This is the complete grid-template-areas, which uses simple names to define each portion of our 2 * 3 grid.

這是完整的網格模板區域，它使用簡單的名稱來定義2 * 3網格的每個部分。

Now that we have defined the grid template, we are going to assign the divs to these areas. So, we have used the IDs of the div and assigned the template area name using grid-area.

現在我們已經定義了網格模板，我們將把div分配給這些區域。因此，我們使用了div的ID，并使用grid-area分配了模板區域名稱。

#header{ grid-area:header;}#leftSB{  grid-area:leftSB;}

Thats it, we have now defined how these divs should be positioned on all viewport sizes without using floats or widths on individual items and also without using bootstrap etc.

就是這樣，我們現在定義了這些div應該如何在所有視口尺寸上定位，而不在單個項目上使用浮點數或寬度，也不在使用引導程序等。

Isn’t it mind-blowing? See what we created in these few lines in action here.

是令人難以置信嗎？在這里查看我們在這幾行中創建的內容。

下一步是什么？ (What’s next?)

We can now work on our divs to add sidebars, navbars etc. I will leave this example here and now proceed to see a little complicated calculator design using CSS Grid.

現在，我們可以在div上添加側邊欄，導航欄等。我將在此處保留此示例，然后繼續使用CSS Grid來查看一些復雜的計算器設計。

定義組件 (Defining the components)

We have a formula display section, the current display section at the top. The rest are the buttons 0–9, the AC (clear) button, and the operator buttons + — * / and =.

我們有一個公式顯示部分，當前顯示部分在頂部。其余的是按鈕0–9，AC(清除)按鈕以及操作員按鈕+ — * /和=。

So, let’s create buttons and divs for all the components and keep them in a container.

因此，讓我們為所有組件創建按鈕和div，并將其保存在容器中。

<body> <div id="root">  <label id="display"> 0</label>  <label id="cdisplay" >0</label>  <button id="clear">AC </button>  <button id="divide">/</button>  <button id="multiply">*</button>  <button id="seven">7</button>  <button id="eight">8</button>  <button id="nine">9</button>  <button id="minus">-</button>  <button id="four">4</button>  <button id="five">5</button>  <button id="six">6</button>  <button id="plus">+</button>  <button id="one">1</button>  <button id="two">2</button>  <button id="three">3</button>  <button id="zero">0</button>  <button id="dot">.</button>  <button id="equal">=</button>   </div> </body>

Let’s look at the calculator image. You can see that we have 4 columns and 7 rows. So let’s define our grid:

讓我們看一下計算器圖像。您可以看到我們有4列和7行。因此，讓我們定義網格：

#root{ padding:5px; background-color:black; width:240px; height:280px;

display:grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;   grid-gap:0.1px;

grid-template-areas:    "display display display display"   "cdisplay cdisplay cdisplay cdisplay"   "clear clear divide multiply"   "seven eight nine minus"   "four five six plus"   "one two three equal"   "zero zero dot equal"; }

Breaking this down…

分解這個……

display:grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Here we have said that we have 4 columns and 7 rows and each part of the grid is the same size. Note that the template columns and rows use 1fr. Fr is a fractional unit and 1fr is for 1 part of the available space.

在這里我們已經說過，我們有4列和7行，并且網格的每個部分都具有相同的大小。請注意，模板的列和行使用1fr。 Fr是小數單位， 1fr是可用空間的一部分。

I have given the root div a width of 240 px and height of 280 px. So 1 fr is approximately 60px wide * 40 px high.

我給根div的寬度為240像素，高度為280像素。所以1 fr大約是60像素寬* 40像素高。

grid-template-areas:    "display display display display"   "cdisplay cdisplay cdisplay cdisplay"   "clear clear divide multiply"   "seven eight nine minus"   "four five six plus"   "one two three equal"   "zero zero dot equal"; }

Here we have defined the grid template areas.

在這里，我們定義了網格模板區域。

Grid template areas are a set of row * column strings. You need to add as many strings as there are rows in your grid. In each row-string you need to mention what each column will contain. The number of items in each string should match the count of columns.

網格模板區域是一組行*列字符串。您需要添加的字符串與網格中的行數一樣多。在每個行字符串中，您需要提及每列將包含的內容。每個字符串中的項目數應與列數匹配。

Note how the display occupies the whole first row. So, it is added 4 times in first row-string.

請注意顯示內容如何占據整個第一行。因此，它在第一個行字符串中添加了4次。

cdisplay, that is current display, occupies the second row and is defined similar to display.

cdisplay(即當前顯示)占據第二行，其定義類似于display。

Next come the buttons. The clear button is in 3rd row and first and second column put together. Hence it is mentioned twice on row-string 3.

接下來是按鈕。清除按鈕位于第三行，第一和第二列放在一起。因此，它在行字符串3上被兩次提及。

And it goes on…

然后繼續……

Now that the major work is over, we need to assign these grid areas to the divs.

現在主要工作已經結束，我們需要將這些網格區域分配給div。

#display{   grid-area:display; }#cdisplay{   grid-area:cdisplay; }#clear {   grid-area:clear; }#divide {   grid-area:divide; } #multiply {   grid-area:multiply; }

I have shown how the grid areas are being assigned for 4 div’s.

我已經展示了如何為4格分配網格區域。

The complete example can be found here where we have added a little more styling.

完整的示例可以在此處找到，我們在其中添加了更多樣式。

結語 (Wrapping up)

As mentioned earlier, this is just an introduction to CSS Grid and more specifically to CSS Grid template areas. I hope this example will make you think of CSS Grid when you look at websites from now on and I hope you will use them in the future.

如前所述，這只是CSS Grid的簡介，更具體地說是CSS Grid模板區域的簡介。我希望這個例子能使您從現在開始瀏覽網站時想到CSS Grid，并希望將來會使用它們。

If you liked my article, please clap. It is quite encouraging for me.

如果您喜歡我的文章，請鼓掌。這對我來說是令人鼓舞的。

If you were to do the same task, how would you approach this? Let me know in the comments.

如果您要執行相同的任務，您將如何處理？在評論中讓我知道。