- See the Pen - 3x3 Layout | CSS Grid by TheOdinProject (@TheOdinProjectExamples) - on CodePen. + CodePen'de TheOdinProject (@TheOdinProjectExamples) tarafından hazırlanan + 3x3 Düzen | CSS Izgaraları örneğine bakınız.
-You will notice two CSS lines have been commented out in this CodePen. Uncomment the property in the `.first-row` class selector to see the grid track between the first and second-row grid lines. +Bu CodePen'de iki CSS satırının yorumlandığını fark edeceksiniz. Birinci ve ikinci satır ızgara çizgileri arasındaki ızgara izini görmek için `.first-row` sınıf seçicisindeki özelliğin yorumunu kaldırın. -Next, uncomment the property in the `.last-column` class selector to see the grid track between the third and fourth-column grid lines. +Ardından, üçüncü ve dördüncü sütun ızgara çizgileri arasındaki ızgara izini görmek için `.last-column` sınıf seçicisindeki özelliği kaldırın. -### Lines +### Çizgiler -Whenever we create grid tracks, grid lines are created *implicitly*. This is important. Grid lines are only created after our grid tracks have been defined. We can not explicitly create grid lines. +Izgara izleri oluşturduğumuzda, ızgara çizgileri *dolaylı olarak* oluşturulur. Bu çok önemlidir. Izgara çizgileri yalnızca ızgara izlerimiz tanımlandıktan sonra oluşturulur. Izgara çizgilerini açıkça oluşturamayız. -Every track has a start line and an end line. The lines are numbered from left to right and top to bottom starting at 1. So our 3x3 grid above has vertical lines for columns ranging from 1 to 4 and horizontal lines for rows ranging from 1 to 4. +Her parçanın bir başlangıç çizgisi ve bir bitiş çizgisi vardır. Çizgiler 1'den başlayarak soldan sağa ve yukarıdan aşağıya doğru numaralandırılır. Dolayısıyla, yukarıdaki 3x3 ızgaramızda 1 ila 4 arasında değişen sütunlar için dikey çizgiler ve 1 ila 4 arasında değişen satırlar için yatay çizgiler vardır. -Grid lines are what we use to position grid items. We'll get to that in a minute, but first let's take a deeper look at grid lines using our developer tools. +Izgara çizgileri, ızgara öğelerini konumlandırmak için kullandığımız şeydir. Buna birazdan değineceğiz, ancak önce geliştirici araçlarımızı kullanarak ızgara çizgilerine daha derinlemesine bir göz atalım. -If you open up developer tools in Chrome, you can navigate to the Layout pane and find the Grid overlay display settings. Make sure that _show line numbers_ is enabled. Select the correct element from the Grid overlays (e.g. this might be our `div.container` if you are inspecting our CodePen.) You should now see an overlay of the grid lines. +Chrome'da geliştirici araçlarını açarsanız, Düzen bölmesine gidebilir ve Izgara yer paylaşımı görüntüleme ayarlarını bulabilirsiniz. Satır numaralarını göster_ seçeneğinin etkin olduğundan emin olun. Izgara kaplamalarından doğru öğeyi seçin (örneğin, CodePen'imizi inceliyorsanız bu bizim `div.container`ımız olabilir.) Şimdi ızgara çizgilerinin bir katmanını görmelisiniz. -Notice that the developer tools also show negative lines opposite from the positive lines. You don't have to worry about the negative lines for now, but know that this gives you another option to use when positioning the grid items. +Geliştirici araçlarının pozitif çizgilerin karşısında negatif çizgiler de gösterdiğine dikkat edin. Şimdilik negatif çizgiler konusunda endişelenmenize gerek yok, ancak bunun size ızgara öğelerini konumlandırırken kullanabileceğiniz başka bir seçenek sunduğunu bilin. -### Cells +### Hücreler -The space in a grid shared by a single row track and a single column track is called a grid *cell*. You can think of a grid cell like a cell in a spreadsheet: a space defined by a *row, column* coordinate. +Bir ızgarada tek bir satır izi ve tek bir sütun izi tarafından paylaşılan alana ızgara *hücresi* denir. Bir ızgara hücresini elektronik tablodaki bir hücre gibi düşünebilirsiniz: *satır, sütun* koordinatıyla tanımlanan bir alan. -By default, each child element of a grid container will occupy one cell. In the example above, we have 9 cells in our grid (3 rows x 3 columns), each with one automatically positioned child element inside. The element marked with the letter "A" is occupying a cell that lies in row track 1 (between row grid lines 1 and 2) and column track 1 (between column grid lines 1 and 2). The item marked with the letter "H" is in a cell at row track 3 (between row grid lines 3 and 4) and column track 2 (between column grid lines 2 and 3). +Varsayılan olarak, bir ızgara kapsayıcısının her bir alt öğesi bir hücreyi kaplayacaktır. Yukarıdaki örnekte, ızgaramızda 9 hücre (3 satır x 3 sütun) vardır ve her birinin içinde otomatik olarak konumlandırılmış bir alt öğe bulunur. "A" harfiyle işaretlenmiş öğe, satır izi 1 (satır ızgara çizgileri 1 ve 2 arasında) ve sütun izi 1 (sütun ızgara çizgileri 1 ve 2 arasında) içinde yer alan bir hücreyi kaplamaktadır. "H" harfiyle işaretlenmiş öğe, satır izi 3 (satır kılavuz çizgileri 3 ve 4 arasında) ve sütun izi 2'de (sütun kılavuz çizgileri 2 ve 3 arasında) bulunan bir hücrededir. -But what happens if we wanted to change the order of our grid items? Or if we want items to occupy more than one cell? +Ancak ızgara öğelerimizin sırasını değiştirmek istersek ne olur? Ya da öğelerin birden fazla hücreyi kaplamasını istersek? -### Positioning +### Konumlandırma -To get a feel for how items can be positioned we will create a mock floor plan for an apartment. Let's start with a total area of our apartment (the grid container) divided into a 5x5 grid. To make this example a little clearer, we'll use a background color to distinguish our container space. Note that we're also using `display: inline-grid` here so that our container does not stretch to take up space the way a block-level box would. This will just help us better visualize the space. +Öğelerin nasıl konumlandırılabileceğini anlamak için bir daire için temsili bir kat planı oluşturacağız. Dairemizin toplam alanını (ızgara konteyneri) 5x5 ızgaraya bölerek başlayalım. Bu örneği biraz daha net hale getirmek için konteyner alanımızı ayırt etmek için bir arka plan rengi kullanacağız. Ayrıca burada `display: inline-grid` kullandığımıza dikkat edin, böylece konteynerimiz blok seviyesindeki bir kutu gibi uzayıp yer kaplamaz. Bu sadece alanı daha iyi görselleştirmemize yardımcı olacaktır.- See the Pen - Positioning 1 | CSS Grid by TheOdinProject (@TheOdinProjectExamples) - on CodePen. + CodePen'de TheOdinProject (@TheOdinProjectExamples) tarafından hazırlanan + Konumlandırma 1 | CSS Izgaraları örneğine bakınız.
-As it stands this is a pretty sad unit. To make it less of an empty box and more of a home we are going to add some items to our grid container that will represent different rooms. +Bu haliyle oldukça hüzünlü bir birim. Onu boş bir kutu olmaktan çıkarıp bir ev haline getirmek için ızgara konteynerimize farklı odaları temsil edecek bazı öğeler ekleyeceğiz.- See the Pen - Positioning 2 | CSS Grid by TheOdinProject (@TheOdinProjectExamples) - on CodePen. + CodePen'de TheOdinProject (@TheOdinProjectExamples) tarafından hazırlanan + Konumlandırma 2 | CSS Izgaraları örneğine bakınız.
-Most of our rooms represent a single grid cell. But we have given ourselves a large living room. (Yay!) We positioned this item using `grid-column-start` and `grid-column-end`. Their property values represent the column grid lines we wish it to start and end with. +Odalarımızın çoğu tek bir ızgara hücresini temsil eder. Ama biz kendimize büyük bir oturma odası verdik. (Yaşasın!) Bu öğeyi `grid-column-start` ve `grid-column-end` kullanarak konumlandırdık. Özellik değerleri, başlamasını ve bitmesini istediğimiz sütun ızgara çizgilerini temsil eder. -You will also notice we have commented out property values for this item's grid row positioning. Uncomment the `grid-row-start` and `grid-row-end` properties to see how our living room can get even bigger by taking up the grid track between the first and third-row grid lines. +Ayrıca, bu öğenin ızgara satırı konumlandırması için özellik değerlerini yorumladığımızı da fark edeceksiniz. Birinci ve üçüncü satır ızgara çizgileri arasındaki ızgara izini alarak oturma odamızın nasıl daha da büyüyebileceğini görmek için `grid-row-start` ve `grid-row-end` özelliklerini yorumdan çıkarın. -These properties allow us to use our existing grid lines to tell items how many rows and columns each item should span across. Take a minute to play around with the property values here. If the line numbers are confusing, inspect the container using your dev tools to show the grid overlay. +Bu özellikler, öğelere her bir öğenin kaç satır ve sütuna yayılması gerektiğini söylemek için mevcut ızgara çizgilerimizi kullanmamızı sağlar. Buradaki özellik değerleriyle oynamak için bir dakikanızı ayırın. Satır numaraları kafa karıştırıcıysa ızgara katmanını göstermek için geliştirme araçlarınızı kullanarak konteyneri inceleyin. -Next, we need to use our space more efficiently. We will make the rest of our rooms span multiple grid cells and fill out the rest of our apartment. +Daha sonra, alanımızı daha verimli kullanmamız gerekiyor. Odalarımızın geri kalanını birden fazla ızgara hücresine yayacağız ve dairemizin geri kalanını dolduracağız.- See the Pen - Positioning 3 | CSS Grid by TheOdinProject (@TheOdinProjectExamples) - on CodePen. + CodePen'de TheOdinProject (@TheOdinProjectExamples) tarafından hazırlanan + Konumlandırma 3 | CSS Izgaraları örneğine bakınız.
-Now we have the blueprints for our full apartment. If you take a look at the `#kitchen` selector you will see we used shorthand properties here. `grid-column` is just a combination of `grid-column-start` and `grid-column-end` with a slash between the two values. And `grid-row` is the shorthand version for setting an item's row positioning. +Artık dairemizin tamamı için planlarımız var. Eğer `#kitchen` seçicisine bakarsanız burada kısaltılmış özellikler kullandığımızı göreceksiniz. `grid-column` sadece `grid-column-start` ve `grid-column-end` değerlerinin iki değer arasında bir eğik çizgi ile birleştirilmesidir. `grid-row` ise bir öğenin satır konumlandırmasını ayarlamanın kısaltılmış yoludur. -One problem with our floor plan is that the bathroom and kitchen are on opposite ends of the apartment. We would save money on the plumbing by placing these two rooms back to back. Take a minute now and see if you can change the starting and ending positions for the bathroom, bedroom and closet so that the bathroom is right next to the kitchen. You can use either the long or shorthand properties here. +Kat planımızla ilgili bir sorun, banyo ve mutfağın dairenin iki ucunda olmasıdır. Bu iki odayı arka arkaya yerleştirerek tesisattan tasarruf edebiliriz. Şimdi bir dakikanızı ayırın ve banyo, yatak odası ve dolap için başlangıç ve bitiş konumlarını değiştirip değiştiremeyeceğinize bakın, böylece banyo mutfağın hemen yanında olur. Burada uzun ya da kısa yol özelliklerini kullanabilirsiniz. ### grid-area -You now know how to position your grid items using row and column lines. But there are other ways to position items and this is where things can get a little confusing. +Artık satır ve sütun çizgilerini kullanarak ızgara öğelerinizi nasıl konumlandıracağınızı biliyorsunuz. Ancak öğeleri konumlandırmanın başka yolları da var ve bu noktada işler biraz karmaşıklaşabilir. -There is an even shorter shorthand for positioning grid items with start and end lines. You can combine `grid-row-start` / `grid-column-start` / `grid-row-end` / `grid-column-end` into one line using `grid-area`. +Izgara öğelerini başlangıç ve bitiş çizgileriyle konumlandırmak için daha da kısa bir kısaltma vardır. `Grid-row-start` / `grid-column-start` / `grid-row-end` / `grid-column-end` öğelerini `grid-area` kullanarak tek bir satırda birleştirebilirsiniz. -Our living room above can be written out like this: +Yukarıdaki oturma odamız şu şekilde yazılabilir: ~~~css /* styles.css */ @@ -102,11 +98,11 @@ Our living room above can be written out like this: } ~~~ -But `grid-area` can also refer to a few different things. +Ancak `grid-area` birkaç farklı şeyi de ifade edebilir. -Instead of using the grid lines to position all the items in a grid, we can create a visual layout of the grid in words. To do this we give each item on the grid a name using `grid-area`. +Bir ızgaradaki tüm öğeleri konumlandırmak için ızgara çizgilerini kullanmak yerine ızgaranın görsel bir düzenini kelimelerle oluşturabiliriz. Bunu yapmak için ızgaradaki her öğeye `grid-area` kullanarak bir isim veririz. -So our living room can be written just like this: +Yani oturma odamız bu şekilde yazılabilir: ~~~css /* styles.css */ @@ -116,60 +112,58 @@ So our living room can be written just like this: } ~~~ -We could do this to all of our grid items and give each room a `grid-area` value as a name. Then we can map out the whole structure with the grid container using `grid-template-areas`. +Bunu tüm ızgara öğelerimiz için yapabilir ve her odaya isim olarak bir `grid-area` değeri verebiliriz. Daha sonra `grid-template-areas` kullanarak tüm yapıyı ızgara konteyneri ile eşleyebiliriz.- See the Pen - grid-template-areas 1 | CSS Grid by TheOdinProject (@TheOdinProjectExamples) - on CodePen. + CodePen'de TheOdinProject (@TheOdinProjectExamples) tarafından hazırlanan + grid-template-areas 1 | CSS Izgaraları örneğine bakınız.
-Wow! You might want to open up the CodePen browser and make it large enough to really read the `grid-template-areas` layout line by line. But this tool gives us a completely different way to position items. +Vay canına! CodePen tarayıcısını açıp `grid-template-areas` düzenini gerçekten satır satır okumak için yeterince büyük yapmak isteyebilirsiniz. Ancak bu araç bize öğeleri konumlandırmak için tamamen farklı bir yol sunuyor. -We can even use `.` to indicate empty cells. Say our apartment might be getting a water heater and washer/dryer. We might not be sure of the exact layout but we can visualize some space easily by removing more room in the bathroom and kitchen: +Boş hücreleri belirtmek için `.` bile kullanabiliriz. Diyelim ki dairemize bir su ısıtıcısı ve çamaşır makinesi/kurutucusu alınıyor. Tam yerleşim planından emin olmayabiliriz, ancak banyo ve mutfakta daha fazla yer açarak bir miktar alanı kolayca görselleştirebiliriz:- See the Pen - grid-template-areas 2 | CSS Grid by TheOdinProject (@TheOdinProjectExamples) - on CodePen. + CodePen'de TheOdinProject (@TheOdinProjectExamples) tarafından hazırlanan + grid-template-areas 2 | CSS Izgaraları örneğine bakınız.
-So now you know two very different ways of using `grid-area` on a grid item. You might even see the term "grid area" refer to a group of cells. For example, all the grid cells of the living room together is a grid area. The apartment analogy should help. A grid item can take up multiple cells forming an area of the grid much like a room with four walls in an apartment. +Artık bir ızgara öğesinde `grid-area` kullanmanın iki farklı yolunu biliyorsunuz. Hatta "ızgara alanı" teriminin bir grup hücreyi ifade ettiğini de görebilirsiniz. Örneğin, oturma odasının tüm ızgara hücreleri birlikte bir ızgara alanıdır. Apartman benzetmesi yardımcı olacaktır. Bir ızgara öğesi, bir apartman dairesinde dört duvarlı bir oda gibi ızgaranın bir alanını oluşturan birden fazla hücreyi kaplayabilir. -### Wrapping up +### Toparlamak gerekirse -As you go through the assignments you will come across more terminology like `span` and `auto` when positioning grid items across tracks. There are also properties to justify and align grid items similar to Flexbox. The best way to learn all this terminology and how to position items is with lots of practice! +Ödevleri gözden geçirdikçe, ızgara öğelerini parçalar arasında konumlandırırken `span` ve `auto` gibi daha fazla terminolojiyle karşılaşacaksınız. Flexbox'a benzer şekilde ızgara öğelerini yaslamak ve hizalamak için özellikler de vardır. Tüm bu terminolojiyi ve öğelerin nasıl konumlandırılacağını öğrenmenin en iyi yolu bol bol pratik ise yapmaktır! -### Assignment +### Ödev