1 files changed, 70 insertions, 0 deletions
diff --git a/files/tr/öğren/css/css_layout/index.html b/files/tr/öğren/css/css_layout/index.html
new file mode 100644
index 0000000000..42a4b4f5c1
--- /dev/null
+++ b/files/tr/öğren/css/css_layout/index.html
@@ -0,0 +1,70 @@
+---
+title: CSS layout
+slug: Öğren/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - NeedsTranslation
+  - Positioning
+  - TopicStub
+  - flexbox
+  - float
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{draft}}</div>
+
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Bu zamana kadar Css temellerini, metnin nasıl stillendirileceğini, ve içeriğinizin içindeki kutuların nasıl biçimleneceğini öğrendik. Şimdi, kutuların bir web sayfasına nasıl yerleştireceğimizi öğrenme zamanı geldi. CSS düzenini daha iyi öğrenebilmek için, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bakabilmemiz için gerekli ön koşulları ele aldık.</p>
+
+<h2 id="Ön_Koşullar">Ön Koşullar</h2>
+
+<p>Bu modülü öğrenmeye başlamadan önce şunları bilmelisin:</p>
+
+<ol>
+ <li><a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">HTML'e giriş</a> kursunda anlatıldığı gibi temel HTML bilgisine sahip olun.</li>
+ <li><a href="/tr/docs/Web/Guide/CSS/Getting_started">Introduction to CSS</a> kursunda anlatıldığı gibi CSS konusunda rahat olun</li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeli</a> kavramını anlamak.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Eğer kendi dosyalarınızı oluşturamayacağınız bir bilgisayar, tablet veya başka bir cihazdan çalışıyorsanız <a href="http://jsbin.com/">JSBin</a> veya <a href="https://thimble.mozilla.org/">Thimble</a> gibi bir çevrimci ortam kullanabilirsiniz.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt>
+ <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt>
+ <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt>
+ <dd>With the basics of positioning covered in the last article, we will now look at building a couple of real world examples, to illustrate what kinds of things you can do with positioning.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd>A new technology, but with support now fairly widespread across browsers, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>Grid systems are another very common feature used in CSS layouts, which tend to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your ability to lay out web pages with CSS.</p>
+
+<dl>
+ <dt>Creating a flexible multicolumn layout (TBD)</dt>
+ <dd>This assessment tests your ability to create a standard multicolumn layout, with a few interesting features.</dd>
+ <dt>Creating a fixed control widget (TBD)</dt>
+ <dd>This assessment challenges your understanding of positioning by asking you to create a fixed position control widget that allows the user to access a web app's controls regardless of where they scroll to.</dd>
+</dl>