Added CSS Grid classes

examples/Demo/Builds/Android/app/CMakeLists.txt

@@ -51,6 +51,7 @@ add_library( ${BINARY_NAME}
     "../../../Source/Demos/FlexBoxDemo.cpp"
     "../../../Source/Demos/FontsDemo.cpp"
     "../../../Source/Demos/GraphicsDemo.cpp"
+    "../../../Source/Demos/GridDemo.cpp"
     "../../../Source/Demos/ImagesDemo.cpp"
     "../../../Source/Demos/JavaScript.cpp"
     "../../../Source/Demos/KeyMappingsDemo.cpp"
@@ -1099,6 +1100,11 @@ add_library( ${BINARY_NAME}
     "../../../../../modules/juce_gui_basics/layout/juce_FlexBox.cpp"
     "../../../../../modules/juce_gui_basics/layout/juce_FlexBox.h"
     "../../../../../modules/juce_gui_basics/layout/juce_FlexItem.h"
+    "../../../../../modules/juce_gui_basics/layout/juce_Grid.cpp"
+    "../../../../../modules/juce_gui_basics/layout/juce_Grid.h"
+    "../../../../../modules/juce_gui_basics/layout/juce_GridItem.cpp"
+    "../../../../../modules/juce_gui_basics/layout/juce_GridItem.h"
+    "../../../../../modules/juce_gui_basics/layout/juce_GridUnitTests.cpp"
     "../../../../../modules/juce_gui_basics/layout/juce_GroupComponent.cpp"
     "../../../../../modules/juce_gui_basics/layout/juce_GroupComponent.h"
     "../../../../../modules/juce_gui_basics/layout/juce_MultiDocumentPanel.cpp"
@@ -2410,6 +2416,11 @@ set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_
 set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_FlexBox.cpp" PROPERTIES HEADER_FILE_ONLY TRUE)
 set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_FlexBox.h" PROPERTIES HEADER_FILE_ONLY TRUE)
 set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_FlexItem.h" PROPERTIES HEADER_FILE_ONLY TRUE)
+set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_Grid.cpp" PROPERTIES HEADER_FILE_ONLY TRUE)
+set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_Grid.h" PROPERTIES HEADER_FILE_ONLY TRUE)
+set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_GridItem.cpp" PROPERTIES HEADER_FILE_ONLY TRUE)
+set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_GridItem.h" PROPERTIES HEADER_FILE_ONLY TRUE)
+set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_GridUnitTests.cpp" PROPERTIES HEADER_FILE_ONLY TRUE)
 set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_GroupComponent.cpp" PROPERTIES HEADER_FILE_ONLY TRUE)
 set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_GroupComponent.h" PROPERTIES HEADER_FILE_ONLY TRUE)
 set_source_files_properties("../../../../../modules/juce_gui_basics/layout/juce_MultiDocumentPanel.cpp" PROPERTIES HEADER_FILE_ONLY TRUE)

examples/Demo/Builds/LinuxMakefile/Makefile

@@ -85,6 +85,7 @@ OBJECTS_APP := \
   $(JUCE_OBJDIR)/FlexBoxDemo_e4f3d9b7.o \
   $(JUCE_OBJDIR)/FontsDemo_6da1e5e9.o \
   $(JUCE_OBJDIR)/GraphicsDemo_85142ef6.o \
+  $(JUCE_OBJDIR)/GridDemo_63e53631.o \
   $(JUCE_OBJDIR)/ImagesDemo_ecf13aa3.o \
   $(JUCE_OBJDIR)/JavaScript_d6e42eb5.o \
   $(JUCE_OBJDIR)/KeyMappingsDemo_cf05c709.o \
@@ -230,6 +231,11 @@ $(JUCE_OBJDIR)/GraphicsDemo_85142ef6.o: ../../Source/Demos/GraphicsDemo.cpp
 	@echo "Compiling GraphicsDemo.cpp"
 	$(V_AT)$(CXX) $(JUCE_CXXFLAGS) $(JUCE_CPPFLAGS_APP) $(JUCE_CFLAGS_APP) -o "$@" -c "$<"
 
+$(JUCE_OBJDIR)/GridDemo_63e53631.o: ../../Source/Demos/GridDemo.cpp
+	-$(V_AT)mkdir -p $(JUCE_OBJDIR)
+	@echo "Compiling GridDemo.cpp"
+	$(V_AT)$(CXX) $(JUCE_CXXFLAGS) $(JUCE_CPPFLAGS_APP) $(JUCE_CFLAGS_APP) -o "$@" -c "$<"
+
 $(JUCE_OBJDIR)/ImagesDemo_ecf13aa3.o: ../../Source/Demos/ImagesDemo.cpp
 	-$(V_AT)mkdir -p $(JUCE_OBJDIR)
 	@echo "Compiling ImagesDemo.cpp"

examples/Demo/Builds/MacOSX/JuceDemo.xcodeproj/project.pbxproj

@@ -42,6 +42,7 @@
 		2BFF2E7E13527E2E764617AA = {isa = PBXBuildFile; fileRef = 7AEEF2EE40D3B8AE687C6618; };
 		E4A67DD76D4D063F547F0844 = {isa = PBXBuildFile; fileRef = 4DB00B418C4F068BC5FC7314; };
 		257CBA785DEDAF53F4E9BF60 = {isa = PBXBuildFile; fileRef = 4D569839066D92C393F58EB4; };
+		EC00D5BAB8AF26746D6AC956 = {isa = PBXBuildFile; fileRef = 3EBB84376D0639930D3ECA78; };
 		9C30D9613D76EEFDB1653F34 = {isa = PBXBuildFile; fileRef = 7DBF83B26277D13CB3FC1479; };
 		B810E94ECBCA231F60EBEA5F = {isa = PBXBuildFile; fileRef = CCEC8F9385AE939B24D27954; };
 		15B2A7314D1E347D65EC664D = {isa = PBXBuildFile; fileRef = F1E995A1E00C6545A4C3297B; };
@@ -105,6 +106,7 @@
 		3375D74953976C15513FA6AE = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; name = "include_juce_events.mm"; path = "../../JuceLibraryCode/include_juce_events.mm"; sourceTree = "SOURCE_ROOT"; };
 		3482A5FDDEE5E5D405047999 = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = WidgetsDemo.cpp; path = ../../Source/Demos/WidgetsDemo.cpp; sourceTree = "SOURCE_ROOT"; };
 		39A06D3252DDA6F97FB09495 = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = OpenGLDemo2D.cpp; path = ../../Source/Demos/OpenGLDemo2D.cpp; sourceTree = "SOURCE_ROOT"; };
+		3EBB84376D0639930D3ECA78 = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = GridDemo.cpp; path = ../../Source/Demos/GridDemo.cpp; sourceTree = "SOURCE_ROOT"; };
 		4621682C1A4E85A088F7CEE0 = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Carbon.framework; path = System/Library/Frameworks/Carbon.framework; sourceTree = SDKROOT; };
 		49412C044B88516D9AF59FDD = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = CryptographyDemo.cpp; path = ../../Source/Demos/CryptographyDemo.cpp; sourceTree = "SOURCE_ROOT"; };
 		4975DB849F14413317E94609 = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = AppConfig.h; path = ../../JuceLibraryCode/AppConfig.h; sourceTree = "SOURCE_ROOT"; };
@@ -205,6 +207,7 @@
 					7AEEF2EE40D3B8AE687C6618,
 					4DB00B418C4F068BC5FC7314,
 					4D569839066D92C393F58EB4,
+					3EBB84376D0639930D3ECA78,
 					7DBF83B26277D13CB3FC1479,
 					CCEC8F9385AE939B24D27954,
 					F1E995A1E00C6545A4C3297B,
@@ -484,6 +487,7 @@
 					2BFF2E7E13527E2E764617AA,
 					E4A67DD76D4D063F547F0844,
 					257CBA785DEDAF53F4E9BF60,
+					EC00D5BAB8AF26746D6AC956,
 					9C30D9613D76EEFDB1653F34,
 					B810E94ECBCA231F60EBEA5F,
 					15B2A7314D1E347D65EC664D,

examples/Demo/Builds/VisualStudio2013/JuceDemo_App.vcxproj

@@ -167,6 +167,7 @@
     <ClCompile Include="..\..\Source\Demos\FlexBoxDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\FontsDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\GraphicsDemo.cpp"/>
+    <ClCompile Include="..\..\Source\Demos\GridDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\ImagesDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\JavaScript.cpp"/>
     <ClCompile Include="..\..\Source\Demos\KeyMappingsDemo.cpp"/>
@@ -1578,6 +1579,15 @@
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.cpp">
       <ExcludedFromBuild>true</ExcludedFromBuild>
     </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridUnitTests.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.cpp">
       <ExcludedFromBuild>true</ExcludedFromBuild>
     </ClCompile>
@@ -2463,6 +2473,8 @@
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_ConcertinaPanel.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexItem.h"/>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.h"/>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_MultiDocumentPanel.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_ResizableBorderComponent.h"/>

examples/Demo/Builds/VisualStudio2013/JuceDemo_App.vcxproj.filters

@@ -466,6 +466,9 @@
     <ClCompile Include="..\..\Source\Demos\GraphicsDemo.cpp">
       <Filter>JuceDemo\Source\Demos</Filter>
     </ClCompile>
+    <ClCompile Include="..\..\Source\Demos\GridDemo.cpp">
+      <Filter>JuceDemo\Source\Demos</Filter>
+    </ClCompile>
     <ClCompile Include="..\..\Source\Demos\ImagesDemo.cpp">
       <Filter>JuceDemo\Source\Demos</Filter>
     </ClCompile>
@@ -1993,6 +1996,15 @@
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.cpp">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridUnitTests.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.cpp">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClCompile>
@@ -4011,6 +4023,12 @@
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexItem.h">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClInclude>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.h">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClInclude>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.h">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClInclude>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.h">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClInclude>

examples/Demo/Builds/VisualStudio2015/JuceDemo_App.vcxproj

@@ -166,6 +166,7 @@
     <ClCompile Include="..\..\Source\Demos\FlexBoxDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\FontsDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\GraphicsDemo.cpp"/>
+    <ClCompile Include="..\..\Source\Demos\GridDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\ImagesDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\JavaScript.cpp"/>
     <ClCompile Include="..\..\Source\Demos\KeyMappingsDemo.cpp"/>
@@ -1577,6 +1578,15 @@
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.cpp">
       <ExcludedFromBuild>true</ExcludedFromBuild>
     </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridUnitTests.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.cpp">
       <ExcludedFromBuild>true</ExcludedFromBuild>
     </ClCompile>
@@ -2462,6 +2472,8 @@
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_ConcertinaPanel.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexItem.h"/>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.h"/>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_MultiDocumentPanel.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_ResizableBorderComponent.h"/>

examples/Demo/Builds/VisualStudio2015/JuceDemo_App.vcxproj.filters

@@ -466,6 +466,9 @@
     <ClCompile Include="..\..\Source\Demos\GraphicsDemo.cpp">
       <Filter>JuceDemo\Source\Demos</Filter>
     </ClCompile>
+    <ClCompile Include="..\..\Source\Demos\GridDemo.cpp">
+      <Filter>JuceDemo\Source\Demos</Filter>
+    </ClCompile>
     <ClCompile Include="..\..\Source\Demos\ImagesDemo.cpp">
       <Filter>JuceDemo\Source\Demos</Filter>
     </ClCompile>
@@ -1993,6 +1996,15 @@
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.cpp">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridUnitTests.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.cpp">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClCompile>
@@ -4011,6 +4023,12 @@
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexItem.h">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClInclude>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.h">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClInclude>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.h">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClInclude>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.h">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClInclude>

examples/Demo/Builds/VisualStudio2017/JuceDemo_App.vcxproj

@@ -166,6 +166,7 @@
     <ClCompile Include="..\..\Source\Demos\FlexBoxDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\FontsDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\GraphicsDemo.cpp"/>
+    <ClCompile Include="..\..\Source\Demos\GridDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\ImagesDemo.cpp"/>
     <ClCompile Include="..\..\Source\Demos\JavaScript.cpp"/>
     <ClCompile Include="..\..\Source\Demos\KeyMappingsDemo.cpp"/>
@@ -1577,6 +1578,15 @@
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.cpp">
       <ExcludedFromBuild>true</ExcludedFromBuild>
     </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridUnitTests.cpp">
+      <ExcludedFromBuild>true</ExcludedFromBuild>
+    </ClCompile>
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.cpp">
       <ExcludedFromBuild>true</ExcludedFromBuild>
     </ClCompile>
@@ -2462,6 +2472,8 @@
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_ConcertinaPanel.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexItem.h"/>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.h"/>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_MultiDocumentPanel.h"/>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_ResizableBorderComponent.h"/>

examples/Demo/Builds/VisualStudio2017/JuceDemo_App.vcxproj.filters

@@ -466,6 +466,9 @@
     <ClCompile Include="..\..\Source\Demos\GraphicsDemo.cpp">
       <Filter>JuceDemo\Source\Demos</Filter>
     </ClCompile>
+    <ClCompile Include="..\..\Source\Demos\GridDemo.cpp">
+      <Filter>JuceDemo\Source\Demos</Filter>
+    </ClCompile>
     <ClCompile Include="..\..\Source\Demos\ImagesDemo.cpp">
       <Filter>JuceDemo\Source\Demos</Filter>
     </ClCompile>
@@ -1993,6 +1996,15 @@
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexBox.cpp">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
+    <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridUnitTests.cpp">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClCompile>
     <ClCompile Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.cpp">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClCompile>
@@ -4011,6 +4023,12 @@
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_FlexItem.h">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClInclude>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_Grid.h">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClInclude>
+    <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GridItem.h">
+      <Filter>Juce Modules\juce_gui_basics\layout</Filter>
+    </ClInclude>
     <ClInclude Include="..\..\..\..\modules\juce_gui_basics\layout\juce_GroupComponent.h">
       <Filter>Juce Modules\juce_gui_basics\layout</Filter>
     </ClInclude>

examples/Demo/Builds/iOS/JuceDemo.xcodeproj/project.pbxproj

@@ -43,6 +43,7 @@
 		2BFF2E7E13527E2E764617AA = {isa = PBXBuildFile; fileRef = 7AEEF2EE40D3B8AE687C6618; };
 		E4A67DD76D4D063F547F0844 = {isa = PBXBuildFile; fileRef = 4DB00B418C4F068BC5FC7314; };
 		257CBA785DEDAF53F4E9BF60 = {isa = PBXBuildFile; fileRef = 4D569839066D92C393F58EB4; };
+		EC00D5BAB8AF26746D6AC956 = {isa = PBXBuildFile; fileRef = 3EBB84376D0639930D3ECA78; };
 		9C30D9613D76EEFDB1653F34 = {isa = PBXBuildFile; fileRef = 7DBF83B26277D13CB3FC1479; };
 		B810E94ECBCA231F60EBEA5F = {isa = PBXBuildFile; fileRef = CCEC8F9385AE939B24D27954; };
 		15B2A7314D1E347D65EC664D = {isa = PBXBuildFile; fileRef = F1E995A1E00C6545A4C3297B; };
@@ -106,6 +107,7 @@
 		3482A5FDDEE5E5D405047999 = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = WidgetsDemo.cpp; path = ../../Source/Demos/WidgetsDemo.cpp; sourceTree = "SOURCE_ROOT"; };
 		37CB4A819F38E7AF9C77A8CB = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreGraphics.framework; path = System/Library/Frameworks/CoreGraphics.framework; sourceTree = SDKROOT; };
 		39A06D3252DDA6F97FB09495 = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = OpenGLDemo2D.cpp; path = ../../Source/Demos/OpenGLDemo2D.cpp; sourceTree = "SOURCE_ROOT"; };
+		3EBB84376D0639930D3ECA78 = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = GridDemo.cpp; path = ../../Source/Demos/GridDemo.cpp; sourceTree = "SOURCE_ROOT"; };
 		49412C044B88516D9AF59FDD = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = CryptographyDemo.cpp; path = ../../Source/Demos/CryptographyDemo.cpp; sourceTree = "SOURCE_ROOT"; };
 		4975DB849F14413317E94609 = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = AppConfig.h; path = ../../JuceLibraryCode/AppConfig.h; sourceTree = "SOURCE_ROOT"; };
 		4C1FFE22514EB2A178750B86 = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreImage.framework; path = System/Library/Frameworks/CoreImage.framework; sourceTree = SDKROOT; };
@@ -207,6 +209,7 @@
 					7AEEF2EE40D3B8AE687C6618,
 					4DB00B418C4F068BC5FC7314,
 					4D569839066D92C393F58EB4,
+					3EBB84376D0639930D3ECA78,
 					7DBF83B26277D13CB3FC1479,
 					CCEC8F9385AE939B24D27954,
 					F1E995A1E00C6545A4C3297B,
@@ -493,6 +496,7 @@
 					2BFF2E7E13527E2E764617AA,
 					E4A67DD76D4D063F547F0844,
 					257CBA785DEDAF53F4E9BF60,
+					EC00D5BAB8AF26746D6AC956,
 					9C30D9613D76EEFDB1653F34,
 					B810E94ECBCA231F60EBEA5F,
 					15B2A7314D1E347D65EC664D,

examples/Demo/JuceDemo.jucer

@@ -235,6 +235,7 @@
         <FILE id="oM20ll" name="FontsDemo.cpp" compile="1" resource="0" file="Source/Demos/FontsDemo.cpp"/>
         <FILE id="emYkSr" name="GraphicsDemo.cpp" compile="1" resource="0"
               file="Source/Demos/GraphicsDemo.cpp"/>
+        <FILE id="PfpwRe" name="GridDemo.cpp" compile="1" resource="0" file="Source/Demos/GridDemo.cpp"/>
         <FILE id="nNKKBo" name="ImagesDemo.cpp" compile="1" resource="0" file="Source/Demos/ImagesDemo.cpp"/>
         <FILE id="L2SbwO" name="JavaScript.cpp" compile="1" resource="0" file="Source/Demos/JavaScript.cpp"/>
         <FILE id="b6ICYv" name="KeyMappingsDemo.cpp" compile="1" resource="0"

examples/Demo/Source/Demos/GridDemo.cpp

@@ -0,0 +1,118 @@
+/*
+  ==============================================================================
+
+   This file is part of the JUCE library.
+   Copyright (c) 2017 - ROLI Ltd.
+
+   JUCE is an open source library subject to commercial or open-source
+   licensing.
+
+   By using JUCE, you agree to the terms of both the JUCE 5 End-User License
+   Agreement and JUCE 5 Privacy Policy (both updated and effective as of the
+   27th April 2017).
+
+   End User License Agreement: www.juce.com/juce-5-licence
+   Privacy Policy: www.juce.com/juce-5-privacy-policy
+
+   Or: You may also use this code under the terms of the GPL v3 (see
+   www.gnu.org/licenses).
+
+   JUCE IS PROVIDED "AS IS" WITHOUT ANY WARRANTY, AND ALL WARRANTIES, WHETHER
+   EXPRESSED OR IMPLIED, INCLUDING MERCHANTABILITY AND FITNESS FOR PURPOSE, ARE
+   DISCLAIMED.
+
+  ==============================================================================
+*/
+
+#include "../JuceDemoHeader.h"
+
+
+struct GridDemo   : public Component
+{
+    GridDemo()
+    {
+        addGridItemPanel (Colours::aquamarine, "0");
+        addGridItemPanel (Colours::aquamarine, "0");
+        addGridItemPanel (Colours::red,        "1");
+        addGridItemPanel (Colours::blue,       "2");
+        addGridItemPanel (Colours::green,      "3");
+        addGridItemPanel (Colours::orange,     "4");
+        addGridItemPanel (Colours::white,      "5");
+        addGridItemPanel (Colours::aquamarine, "6");
+        addGridItemPanel (Colours::red,        "7");
+        addGridItemPanel (Colours::blue,       "8");
+        addGridItemPanel (Colours::green,      "9");
+        addGridItemPanel (Colours::orange,     "10");
+        addGridItemPanel (Colours::white,      "11");
+    }
+
+    void addGridItemPanel (Colour colour, const char* text)
+    {
+        addAndMakeVisible (items.add (new GridItemPanel (colour, text)));
+    }
+
+    void paint (Graphics& g) override
+    {
+        g.fillAll (Colours::black);
+    }
+
+    void resized() override
+    {
+         Grid grid;
+
+         grid.rowGap    = 20_px;
+         grid.columnGap = 20_px;
+
+         using Track = Grid::TrackInfo;
+
+         grid.templateRows = { Track (1_fr), Track (1_fr), Track (1_fr) };
+
+         grid.templateColumns = { Track (1_fr),
+                                  Track (1_fr),
+                                  Track (1_fr) };
+
+
+         grid.autoColumns = Track (1_fr);
+         grid.autoRows    = Track (1_fr);
+
+         grid.autoFlow = Grid::AutoFlow::column;
+
+         grid.items.addArray ({ GridItem (items[0]).withArea (2, 2, 4, 4),
+                                GridItem (items[1]),
+                                GridItem (items[2]).withArea ({}, 3),
+                                GridItem (items[3]),
+                                GridItem (items[4]).withArea (GridItem::Span (2), {}),
+                                GridItem (items[5]),
+                                GridItem (items[6]),
+                                GridItem (items[7]),
+                                GridItem (items[8])
+                              });
+
+         grid.performLayout (getLocalBounds());
+    }
+
+    //==============================================================================
+    struct GridItemPanel  : public Component
+    {
+        GridItemPanel (Colour colourToUse, const String& textToUse)
+            : colour (colourToUse),
+              text (textToUse)
+        {}
+
+        void paint (Graphics& g) override
+        {
+            g.fillAll (colour.withAlpha (0.5f));
+
+            g.setColour (Colours::black);
+            g.drawText (text, getLocalBounds().withSizeKeepingCentre (100, 100), Justification::centred, false);
+        }
+
+        Colour colour;
+        String text;
+    };
+
+    OwnedArray<GridItemPanel> items;
+};
+
+// This static object will register this demo type in a global list of demos..
+static JuceDemoType<GridDemo> demo ("10 Components: GridDemo");

modules/juce_gui_basics/juce_gui_basics.cpp

@@ -128,6 +128,9 @@
  #undef KeyPress
 #endif
 
+#include <map>
+#include <set>
+
 //==============================================================================
 namespace juce
 {
@@ -256,6 +259,9 @@ extern bool juce_areThereAnyAlwaysOnTopWindows();
 // these classes are C++11-only
 #if JUCE_COMPILER_SUPPORTS_INITIALIZER_LISTS
  #include "layout/juce_FlexBox.cpp"
+ #include "layout/juce_GridItem.cpp"
+ #include "layout/juce_Grid.cpp"
+ #include "layout/juce_GridUnitTests.cpp"
 #endif
 
 #if JUCE_IOS || JUCE_WINDOWS

modules/juce_gui_basics/juce_gui_basics.h

@@ -157,6 +157,7 @@ class KeyPressMappingSet;
 class ApplicationCommandManagerListener;
 class DrawableButton;
 class FlexBox;
+class Grid;
 
 #include "mouse/juce_MouseCursor.h"
 #include "mouse/juce_MouseListener.h"
@@ -295,6 +296,14 @@ class FlexBox;
 #if JUCE_COMPILER_SUPPORTS_INITIALIZER_LISTS
 #include "layout/juce_FlexItem.h"
 #include "layout/juce_FlexBox.h"
+#include "layout/juce_GridItem.h"
+#include "layout/juce_Grid.h"
+
+constexpr Grid::Px operator"" _px (long double px) { return Grid::Px { px }; }
+constexpr Grid::Px operator"" _px (unsigned long long px) { return Grid::Px { px }; }
+
+constexpr Grid::Fr operator"" _fr (unsigned long long fr) { return Grid::Fr { fr }; }
+
 #endif
 
 }

modules/juce_gui_basics/layout/juce_Grid.h

@@ -0,0 +1,174 @@
+/*
+  ==============================================================================
+
+   This file is part of the JUCE library.
+   Copyright (c) 2017 - ROLI Ltd.
+
+   JUCE is an open source library subject to commercial or open-source
+   licensing.
+
+   By using JUCE, you agree to the terms of both the JUCE 5 End-User License
+   Agreement and JUCE 5 Privacy Policy (both updated and effective as of the
+   27th April 2017).
+
+   End User License Agreement: www.juce.com/juce-5-licence
+   Privacy Policy: www.juce.com/juce-5-privacy-policy
+
+   Or: You may also use this code under the terms of the GPL v3 (see
+   www.gnu.org/licenses).
+
+   JUCE IS PROVIDED "AS IS" WITHOUT ANY WARRANTY, AND ALL WARRANTIES, WHETHER
+   EXPRESSED OR IMPLIED, INCLUDING MERCHANTABILITY AND FITNESS FOR PURPOSE, ARE
+   DISCLAIMED.
+
+  ==============================================================================
+*/
+
+
+/**
+    Container that handles geometry for grid layouts (fixed columns and rows) using a set of declarative rules.
+
+    Implemented from the `CSS Grid Layout` specification as described at:
+    https://css-tricks.com/snippets/css/complete-guide-grid/
+
+    @see GridItem
+*/
+class JUCE_API  Grid
+{
+public:
+    //==============================================================================
+    /** A size in pixels */
+    struct Px
+    {
+        explicit Px (float p) : pixels (static_cast<long double>(p)) { /*sta (p >= 0.0f);*/ }
+        explicit Px (int p)   : pixels (static_cast<long double>(p)) { /*sta (p >= 0.0f);*/ }
+        explicit constexpr Px (long double p)        : pixels (p) {}
+        explicit constexpr Px (unsigned long long p) : pixels (static_cast<long double>(p)) {}
+
+        long double pixels;
+    };
+
+    /** A fractional ratio integer */
+    struct Fr
+    {
+        explicit Fr (int f) : fraction (static_cast<unsigned long long> (f)) {}
+        explicit constexpr Fr (unsigned long long p) : fraction (p) {}
+
+        unsigned long long fraction;
+    };
+
+    //==============================================================================
+    /** */
+    struct TrackInfo
+    {
+        /** Creates a track with auto dimension. */
+        TrackInfo() noexcept;
+        /** */
+        TrackInfo (Px sizeInPixels) noexcept;
+        /** */
+        TrackInfo (Fr fractionOfFreeSpace) noexcept;
+
+        /** */
+        TrackInfo (Px sizeInPixels, const juce::String& endLineNameToUse) noexcept;
+        /** */
+        TrackInfo (Fr fractionOfFreeSpace, const juce::String& endLineNameToUse) noexcept;
+
+        /** */
+        TrackInfo (const juce::String& startLineNameToUse, Px sizeInPixels) noexcept;
+        /** */
+        TrackInfo (const juce::String& startLineNameToUse, Fr fractionOfFreeSpace) noexcept;
+
+        /** */
+        TrackInfo (const juce::String& startLineNameToUse, Px sizeInPixels, const juce::String& endLineNameToUse) noexcept;
+        /** */
+        TrackInfo (const juce::String& startLineNameToUse, Fr fractionOfFreeSpace, const juce::String& endLineNameToUse) noexcept;
+
+    private:
+        friend class Grid;
+        friend class GridItem;
+
+        float size = 0; // Either a fraction or an absolute size in pixels
+        bool isFraction = false;
+        bool hasKeyword = false;
+
+        juce::String startLineName, endLineName;
+    };
+
+    //==============================================================================
+    /** */
+    enum class JustifyItems : int   { start = 0, end, center, stretch };
+    /** */
+    enum class AlignItems : int     { start = 0, end, center, stretch };
+    /** */
+    enum class JustifyContent       { start, end, center, stretch, spaceAround, spaceBetween, spaceEvenly };
+    /** */
+    enum class AlignContent         { start, end, center, stretch, spaceAround, spaceBetween, spaceEvenly };
+    /** */
+    enum class AutoFlow             { row, column, rowDense, columnDense };
+
+
+    //==============================================================================
+    /** */
+    Grid() noexcept;
+
+    /** Destructor */
+    ~Grid() noexcept;
+
+    //==============================================================================
+    /** */
+    JustifyItems   justifyItems   = JustifyItems::stretch;
+    /** */
+    AlignItems     alignItems     = AlignItems::stretch;
+    /** */
+    JustifyContent justifyContent = JustifyContent::stretch;
+    /** */
+    AlignContent   alignContent   = AlignContent::stretch;
+    /** */
+    AutoFlow       autoFlow       = AutoFlow::row;
+
+
+    //==============================================================================
+    /** */
+    juce::Array<TrackInfo> templateColumns;
+
+    /** */
+    juce::Array<TrackInfo> templateRows;
+
+    /** Template areas */
+    juce::StringArray templateAreas;
+
+    /** */
+    TrackInfo autoRows;
+
+    /** */
+    TrackInfo autoColumns;
+
+    /** */
+    Px columnGap { 0 };
+    /** */
+    Px rowGap { 0 };
+
+    /** */
+    void setGap (Px sizeInPixels) noexcept          { rowGap = columnGap = sizeInPixels; }
+
+    //==============================================================================
+    /** */
+    juce::Array<GridItem> items;
+
+    //==============================================================================
+    /** */
+    void performLayout (juce::Rectangle<int>);
+
+    //==============================================================================
+    /** */
+    int getNumberOfColumns() const noexcept         { return templateColumns.size(); }
+    /** */
+    int getNumberOfRows() const noexcept            { return templateRows.size(); }
+
+private:
+    //==============================================================================
+    struct SizeCalculation;
+    struct PlacementHelpers;
+    struct AutoPlacement;
+    struct BoxAlignment;
+};

modules/juce_gui_basics/layout/juce_GridItem.cpp

@@ -0,0 +1,176 @@
+/*
+  ==============================================================================
+
+   This file is part of the JUCE library.
+   Copyright (c) 2017 - ROLI Ltd.
+
+   JUCE is an open source library subject to commercial or open-source
+   licensing.
+
+   By using JUCE, you agree to the terms of both the JUCE 5 End-User License
+   Agreement and JUCE 5 Privacy Policy (both updated and effective as of the
+   27th April 2017).
+
+   End User License Agreement: www.juce.com/juce-5-licence
+   Privacy Policy: www.juce.com/juce-5-privacy-policy
+
+   Or: You may also use this code under the terms of the GPL v3 (see
+   www.gnu.org/licenses).
+
+   JUCE IS PROVIDED "AS IS" WITHOUT ANY WARRANTY, AND ALL WARRANTIES, WHETHER
+   EXPRESSED OR IMPLIED, INCLUDING MERCHANTABILITY AND FITNESS FOR PURPOSE, ARE
+   DISCLAIMED.
+
+  ==============================================================================
+*/
+
+
+GridItem::Property::Property() noexcept : isAuto (true)
+{
+}
+
+GridItem::Property::Property (GridItem::Keyword keyword) noexcept : isAuto (keyword == GridItem::Keyword::autoValue)
+{
+    jassert (keyword == GridItem::Keyword::autoValue);
+}
+
+GridItem::Property::Property (const char* lineNameToUse) noexcept : GridItem::Property (juce::String (lineNameToUse))
+{
+}
+
+GridItem::Property::Property (const juce::String& lineNameToUse) noexcept : name (lineNameToUse), number (1)
+{
+}
+
+GridItem::Property::Property (int numberToUse) noexcept : number (numberToUse)
+{
+}
+
+GridItem::Property::Property (int numberToUse, const juce::String& lineNameToUse) noexcept
+    : name (lineNameToUse), number (numberToUse)
+{
+}
+
+GridItem::Property::Property (Span spanToUse) noexcept
+    : name (spanToUse.name), number (spanToUse.number), isSpan (true)
+{
+}
+
+
+//==============================================================================
+GridItem::Margin::Margin() noexcept : left(), right(), top(), bottom()
+{}
+
+GridItem::Margin::Margin (float v) noexcept : left (v), right (v), top (v), bottom (v)
+{}
+
+//==============================================================================
+GridItem::GridItem() noexcept {}
+GridItem::~GridItem() noexcept {}
+
+GridItem::GridItem (juce::Component& componentToUse) noexcept  : associatedComponent (&componentToUse) {}
+GridItem::GridItem (juce::Component* componentToUse) noexcept  : associatedComponent (componentToUse) {}
+
+void GridItem::setArea (Property rowStart, Property columnStart, Property rowEnd, Property columnEnd)
+{
+    column.start = columnStart;
+    column.end = columnEnd;
+    row.start = rowStart;
+    row.end = rowEnd;
+}
+
+void GridItem::setArea (Property rowStart, Property columnStart)
+{
+    column.start = columnStart;
+    row.start = rowStart;
+}
+
+void GridItem::setArea (const juce::String& areaName)
+{
+    area = areaName;
+}
+
+GridItem GridItem::withArea (Property rowStart, Property columnStart, Property rowEnd, Property columnEnd) const noexcept
+{
+    auto gi = *this;
+    gi.setArea (rowStart, columnStart, rowEnd, columnEnd);
+    return gi;
+}
+
+GridItem GridItem::withArea (Property rowStart, Property columnStart) const noexcept
+{
+    auto gi = *this;
+    gi.setArea (rowStart, columnStart);
+    return gi;
+}
+
+GridItem GridItem::withArea (const juce::String& areaName) const noexcept
+{
+    auto gi = *this;
+    gi.setArea (areaName);
+    return gi;
+}
+
+GridItem GridItem::withRow (StartAndEndProperty newRow) const noexcept
+{
+    auto gi = *this;
+    gi.row = newRow;
+    return gi;
+}
+
+GridItem GridItem::withColumn (StartAndEndProperty newColumn) const noexcept
+{
+    auto gi = *this;
+    gi.column = newColumn;
+    return gi;
+}
+
+GridItem GridItem::withAlignSelf (AlignSelf newAlignSelf) const noexcept
+{
+    auto gi = *this;
+    gi.alignSelf = newAlignSelf;
+    return gi;
+}
+
+GridItem GridItem::withJustifySelf (JustifySelf newJustifySelf) const noexcept
+{
+    auto gi = *this;
+    gi.justifySelf = newJustifySelf;
+    return gi;
+}
+
+GridItem GridItem::withWidth (float newWidth) const noexcept
+{
+    auto gi = *this;
+    gi.width = newWidth;
+    return gi;
+}
+
+GridItem GridItem::withHeight (float newHeight) const noexcept
+{
+    auto gi = *this;
+    gi.height = newHeight;
+    return gi;
+}
+
+GridItem GridItem::withSize (float newWidth, float newHeight) const noexcept
+{
+    auto gi = *this;
+    gi.width = newWidth;
+    gi.height = newHeight;
+    return gi;
+}
+
+GridItem GridItem::withMargin (Margin newHeight) const noexcept
+{
+    auto gi = *this;
+    gi.margin = newHeight;
+    return gi;
+}
+
+GridItem GridItem::withOrder (int newOrder) const noexcept
+{
+    auto gi = *this;
+    gi.order = newOrder;
+    return gi;
+}

modules/juce_gui_basics/layout/juce_GridItem.h

@@ -0,0 +1,221 @@
+/*
+  ==============================================================================
+
+   This file is part of the JUCE library.
+   Copyright (c) 2017 - ROLI Ltd.
+
+   JUCE is an open source library subject to commercial or open-source
+   licensing.
+
+   By using JUCE, you agree to the terms of both the JUCE 5 End-User License
+   Agreement and JUCE 5 Privacy Policy (both updated and effective as of the
+   27th April 2017).
+
+   End User License Agreement: www.juce.com/juce-5-licence
+   Privacy Policy: www.juce.com/juce-5-privacy-policy
+
+   Or: You may also use this code under the terms of the GPL v3 (see
+   www.gnu.org/licenses).
+
+   JUCE IS PROVIDED "AS IS" WITHOUT ANY WARRANTY, AND ALL WARRANTIES, WHETHER
+   EXPRESSED OR IMPLIED, INCLUDING MERCHANTABILITY AND FITNESS FOR PURPOSE, ARE
+   DISCLAIMED.
+
+  ==============================================================================
+*/
+
+
+/**
+    Defines an item in a Grid
+    @see Grid
+*/
+class JUCE_API  GridItem
+{
+public:
+    enum class Keyword { autoValue };
+
+    //==============================================================================
+    /** */
+    struct Span
+    {
+        explicit Span (int numberToUse) noexcept : number (numberToUse)
+        {
+            /* Span must be at least one and positive */
+            jassert (numberToUse > 0);
+        }
+
+        explicit Span (int numberToUse, const juce::String& nameToUse) : Span (numberToUse)
+        {
+            /* Name must not be empty */
+            jassert (nameToUse.isNotEmpty());
+            name = nameToUse;
+        }
+
+        explicit Span (const juce::String& nameToUse) : name (nameToUse)
+        {
+            /* Name must not be empty */
+            jassert (nameToUse.isNotEmpty());
+        }
+
+        int number = 1;
+        juce::String name;
+    };
+
+    //==============================================================================
+    /** */
+    struct Property
+    {
+        /** */
+        Property() noexcept;
+
+        /** */
+        Property (Keyword keyword) noexcept;
+
+        /** */
+        Property (const char* lineNameToUse) noexcept;
+
+        /** */
+        Property (const juce::String& lineNameToUse) noexcept;
+
+        /** */
+        Property (int numberToUse) noexcept;
+
+        /** */
+        Property (int numberToUse, const juce::String& lineNameToUse) noexcept;
+
+        /** */
+        Property (Span spanToUse) noexcept;
+
+    private:
+        bool hasSpan() const noexcept       { return isSpan && ! isAuto; }
+        bool hasAbsolute() const noexcept   { return ! (isSpan || isAuto);  }
+        bool hasAuto() const noexcept       { return isAuto; }
+        bool hasName() const noexcept       { return name.isNotEmpty(); }
+
+        friend class Grid;
+
+        juce::String name;
+        int number = 1; /** Either an absolute line number or number of lines to span across. */
+        bool isSpan = false;
+        bool isAuto = false;
+    };
+
+    //==============================================================================
+    /** */
+    struct StartAndEndProperty { Property start, end; };
+
+    //==============================================================================
+    /** */
+    enum class JustifySelf : int { start = 0, end, center, stretch, autoValue };
+    /** */
+    enum class AlignSelf   : int { start = 0, end, center, stretch, autoValue };
+
+    /** */
+    GridItem() noexcept;
+    /** */
+    GridItem (juce::Component& componentToUse) noexcept;
+    /** */
+    GridItem (juce::Component* componentToUse) noexcept;
+
+    /** Destructor. */
+    ~GridItem() noexcept;
+
+    //==============================================================================
+    /** */
+    juce::Component* associatedComponent = nullptr;
+
+    //==============================================================================
+    /** */
+    int order = 0;
+
+    /** */
+    JustifySelf  justifySelf = JustifySelf::autoValue;
+    /** */
+    AlignSelf    alignSelf   = AlignSelf::autoValue;
+
+    /** */
+    StartAndEndProperty column = { Keyword::autoValue, Keyword::autoValue };
+    /** */
+    StartAndEndProperty row    = { Keyword::autoValue, Keyword::autoValue };
+
+    /** */
+    juce::String area;
+
+    //==============================================================================
+    enum
+    {
+        useDefaultValue = -2, /* TODO: useDefaultValue should be named useAuto */
+        notAssigned = -1
+    };
+
+    /* TODO: move all of this into a common class that is shared with the FlexItem */
+    float width = notAssigned;
+    float minWidth = 0;
+    float maxWidth = notAssigned;
+
+    float height = notAssigned;
+    float minHeight = 0;
+    float maxHeight = notAssigned;
+
+    struct Margin
+    {
+        Margin() noexcept;
+        Margin (float size) noexcept;
+
+        float left;
+        float right;
+        float top;
+        float bottom;
+    };
+
+    /** */
+    Margin margin;
+
+    /** */
+    juce::Rectangle<float> currentBounds;
+
+    /** Short-hand */
+    void setArea (Property rowStart, Property columnStart, Property rowEnd, Property columnEnd);
+
+    /** Short-hand, span of 1 by default */
+    void setArea (Property rowStart, Property columnStart);
+
+    /** Short-hand */
+    void setArea (const juce::String& areaName);
+
+    /** Short-hand */
+    GridItem withArea (Property rowStart, Property columnStart, Property rowEnd, Property columnEnd) const noexcept;
+
+    /** Short-hand, span of 1 by default */
+    GridItem withArea (Property rowStart, Property columnStart) const noexcept;
+
+    /** Short-hand */
+    GridItem withArea (const juce::String& areaName)  const noexcept;
+
+    /**  */
+    GridItem withRow (StartAndEndProperty row) const noexcept;
+
+    /**  */
+    GridItem withColumn (StartAndEndProperty column) const noexcept;
+
+    /** */
+    GridItem withAlignSelf (AlignSelf newAlignSelf) const noexcept;
+
+    /** */
+    GridItem withJustifySelf (JustifySelf newJustifySelf) const noexcept;
+
+    /** */
+    GridItem withWidth (float newWidth) const noexcept;
+
+    /** */
+    GridItem withHeight (float newHeight) const noexcept;
+
+    /** */
+    GridItem withSize (float newWidth, float newHeight) const noexcept;
+
+    /** */
+    GridItem withMargin (Margin newMargin) const noexcept;
+
+    /** Returns a copy of this object with a new order. */
+    GridItem withOrder (int newOrder) const noexcept;
+};

modules/juce_gui_basics/layout/juce_GridUnitTests.cpp

@@ -0,0 +1,257 @@
+/*
+  ==============================================================================
+
+   This file is part of the JUCE library.
+   Copyright (c) 2017 - ROLI Ltd.
+
+   JUCE is an open source library subject to commercial or open-source
+   licensing.
+
+   By using JUCE, you agree to the terms of both the JUCE 5 End-User License
+   Agreement and JUCE 5 Privacy Policy (both updated and effective as of the
+   27th April 2017).
+
+   End User License Agreement: www.juce.com/juce-5-licence
+   Privacy Policy: www.juce.com/juce-5-privacy-policy
+
+   Or: You may also use this code under the terms of the GPL v3 (see
+   www.gnu.org/licenses).
+
+   JUCE IS PROVIDED "AS IS" WITHOUT ANY WARRANTY, AND ALL WARRANTIES, WHETHER
+   EXPRESSED OR IMPLIED, INCLUDING MERCHANTABILITY AND FITNESS FOR PURPOSE, ARE
+   DISCLAIMED.
+
+  ==============================================================================
+*/
+
+struct GridTests  : public juce::UnitTest
+{
+    GridTests() : juce::UnitTest ("Grid class") {}
+
+    void runTest() override
+    {
+        using Fr = juce::Grid::Fr;
+        using Tr = juce::Grid::TrackInfo;
+        using Rect = juce::Rectangle<float>;
+        using Grid = juce::Grid;
+
+        {
+            Grid grid;
+
+            grid.templateColumns.add (Tr (1_fr));
+            grid.templateRows.addArray ({ Tr (20_px), Tr (1_fr) });
+
+            grid.items.addArray ({ GridItem().withArea (1, 1),
+                                   GridItem().withArea (2, 1) });
+
+            grid.performLayout (juce::Rectangle<int> (200, 400));
+
+            beginTest ("Layout calculation test: 1 column x 2 rows: no gap");
+            expect (grid.items[0].currentBounds == Rect (0.0f, 0.0f,  200.f, 20.0f));
+            expect (grid.items[1].currentBounds == Rect (0.0f, 20.0f, 200.f, 380.0f));
+
+            grid.templateColumns.add (Tr (50_px));
+            grid.templateRows.add (Tr (2_fr));
+
+            grid.items.addArray ( { GridItem().withArea (1, 2),
+                                    GridItem().withArea (2, 2),
+                                    GridItem().withArea (3, 1),
+                                    GridItem().withArea (3, 2) });
+
+            grid.performLayout (juce::Rectangle<int> (150, 170));
+
+            beginTest ("Layout calculation test: 2 columns x 3 rows: no gap");
+            expect (grid.items[0].currentBounds == Rect (0.0f,   0.0f,  100.0f, 20.0f));
+            expect (grid.items[1].currentBounds == Rect (0.0f,   20.0f, 100.0f, 50.0f));
+            expect (grid.items[2].currentBounds == Rect (100.0f, 0.0f,  50.0f,  20.0f));
+            expect (grid.items[3].currentBounds == Rect (100.0f, 20.0f, 50.0f,  50.0f));
+            expect (grid.items[4].currentBounds == Rect (0.0f,   70.0f, 100.0f, 100.0f));
+            expect (grid.items[5].currentBounds == Rect (100.0f, 70.0f, 50.0f,  100.0f));
+
+            grid.columnGap = 20_px;
+            grid.rowGap    = 10_px;
+
+            grid.performLayout (juce::Rectangle<int> (200, 310));
+
+            beginTest ("Layout calculation test: 2 columns x 3 rows: rowGap of 10 and columnGap of 20");
+            expect (grid.items[0].currentBounds == Rect (0.0f, 0.0f, 130.0f, 20.0f));
+            expect (grid.items[1].currentBounds == Rect (0.0f, 30.0f, 130.0f, 90.0f));
+            expect (grid.items[2].currentBounds == Rect (150.0f, 0.0f, 50.0f, 20.0f));
+            expect (grid.items[3].currentBounds == Rect (150.0f, 30.0f, 50.0f, 90.0f));
+            expect (grid.items[4].currentBounds == Rect (0.0f, 130.0f, 130.0f, 180.0f));
+            expect (grid.items[5].currentBounds == Rect (150.0f, 130.0f, 50.0f,  180.0f));
+        }
+
+        {
+            Grid grid;
+
+            grid.templateColumns.addArray ({ Tr ("first", 20_px, "in"), Tr ("in", 1_fr, "in"), Tr (20_px, "last") });
+            grid.templateRows.addArray ({ Tr (1_fr),
+                                          Tr (20_px)});
+
+            {
+                beginTest ("Grid items placement tests: integer and custom ident, counting forward");
+
+                GridItem i1, i2, i3, i4, i5;
+                i1.column = { 1, 4 };
+                i1.row    = { 1, 2 };
+
+                i2.column = { 1, 3 };
+                i2.row    = { 1, 3 };
+
+                i3.column = { "first", "in" };
+                i3.row    = { 2, 3 };
+
+                i4.column = { "first", { 2, "in" } };
+                i4.row    = { 1, 2 };
+
+                i5.column = { "first", "last" };
+                i5.row    = { 1, 2 };
+
+                grid.items.addArray ({ i1, i2, i3, i4, i5 });
+
+                grid.performLayout ({ 140, 100 });
+
+                expect (grid.items[0].currentBounds == Rect (0.0f, 0.0f,  140.0f, 80.0f));
+                expect (grid.items[1].currentBounds == Rect (0.0f, 0.0f,  120.0f, 100.0f));
+                expect (grid.items[2].currentBounds == Rect (0.0f, 80.0f, 20.0f,  20.0f));
+                expect (grid.items[3].currentBounds == Rect (0.0f, 0.0f,  120.0f, 80.0f));
+                expect (grid.items[4].currentBounds == Rect (0.0f, 0.0f,  140.0f, 80.0f));
+            }
+        }
+
+        {
+            Grid grid;
+
+            grid.templateColumns.addArray ({ Tr ("first", 20_px, "in"), Tr ("in", 1_fr, "in"), Tr (20_px, "last") });
+            grid.templateRows.addArray ({ Tr (1_fr),
+                                          Tr (20_px)});
+
+            beginTest ("Grid items placement tests: integer and custom ident, counting forward, reversed end and start");
+
+            GridItem i1, i2, i3, i4, i5;
+            i1.column = { 4, 1 };
+            i1.row    = { 2, 1 };
+
+            i2.column = { 3, 1 };
+            i2.row    = { 3, 1 };
+
+            i3.column = { "in", "first" };
+            i3.row    = { 3, 2 };
+
+            i4.column = { "first", { 2, "in" } };
+            i4.row    = { 1, 2 };
+
+            i5.column = { "last", "first" };
+            i5.row    = { 1, 2 };
+
+            grid.items.addArray ({ i1, i2, i3, i4, i5 });
+
+            grid.performLayout ({ 140, 100 });
+
+            expect (grid.items[0].currentBounds == Rect (0.0f, 0.0f,  140.0f, 80.0f));
+            expect (grid.items[1].currentBounds == Rect (0.0f, 0.0f,  120.0f, 100.0f));
+            expect (grid.items[2].currentBounds == Rect (0.0f, 80.0f, 20.0f,  20.0f));
+            expect (grid.items[3].currentBounds == Rect (0.0f, 0.0f,  120.0f, 80.0f));
+            expect (grid.items[4].currentBounds == Rect (0.0f, 0.0f,  140.0f, 80.0f));
+        }
+
+        {
+            beginTest ("Grid items placement tests: areas");
+
+            Grid grid;
+
+            grid.templateColumns =       { Tr (50_px), Tr (100_px), Tr (Fr (1_fr)), Tr (50_px) };
+            grid.templateRows = { Tr (50_px),
+                                  Tr (1_fr),
+                                  Tr (50_px) };
+
+            grid.templateAreas = { "header header header header",
+                                   "main main . sidebar",
+                                   "footer footer footer footer" };
+
+            grid.items.addArray ({ GridItem().withArea ("header"),
+                                   GridItem().withArea ("main"),
+                                   GridItem().withArea ("sidebar"),
+                                   GridItem().withArea ("footer"),
+                                });
+
+            grid.performLayout ({ 300, 150 });
+
+            expect (grid.items[0].currentBounds == Rect (0.f,   0.f,   300.f, 50.f));
+            expect (grid.items[1].currentBounds == Rect (0.f,   50.f,  150.f, 50.f));
+            expect (grid.items[2].currentBounds == Rect (250.f, 50.f,  50.f,  50.f));
+            expect (grid.items[3].currentBounds == Rect (0.f,   100.f, 300.f, 50.f));
+        }
+
+        {
+            beginTest ("Grid implicit rows and columns: triggered by areas");
+
+            Grid grid;
+
+            grid.templateColumns =       { Tr (50_px), Tr (100_px), Tr (1_fr), Tr (50_px) };
+            grid.templateRows = { Tr (50_px),
+                                  Tr (1_fr),
+                                  Tr (50_px) };
+
+            grid.autoRows = Tr (30_px);
+            grid.autoColumns = Tr (30_px);
+
+            grid.templateAreas = { "header header header header header",
+                                   "main main . sidebar sidebar",
+                                   "footer footer footer footer footer",
+                                   "sub sub sub sub sub"};
+
+            grid.items.addArray ({ GridItem().withArea ("header"),
+                                   GridItem().withArea ("main"),
+                                   GridItem().withArea ("sidebar"),
+                                   GridItem().withArea ("footer"),
+                                   GridItem().withArea ("sub"),
+                                });
+
+            grid.performLayout ({ 330, 180 });
+
+            expect (grid.items[0].currentBounds == Rect (0.f,   0.f,   330.f, 50.f));
+            expect (grid.items[1].currentBounds == Rect (0.f,   50.f,  150.f, 50.f));
+            expect (grid.items[2].currentBounds == Rect (250.f, 50.f,  80.f,  50.f));
+            expect (grid.items[3].currentBounds == Rect (0.f,   100.f, 330.f, 50.f));
+            expect (grid.items[4].currentBounds == Rect (0.f,   150.f, 330.f, 30.f));
+        }
+
+        {
+            beginTest ("Grid implicit rows and columns: triggered by areas");
+
+            Grid grid;
+
+            grid.templateColumns =       { Tr (50_px), Tr (100_px), Tr (1_fr), Tr (50_px) };
+            grid.templateRows = { Tr (50_px),
+                                  Tr (1_fr),
+                                  Tr (50_px) };
+
+            grid.autoRows = Tr (1_fr);
+            grid.autoColumns = Tr (1_fr);
+
+            grid.templateAreas = { "header header header header",
+                                   "main main . sidebar",
+                                   "footer footer footer footer" };
+
+            grid.items.addArray ({ GridItem().withArea ("header"),
+                                   GridItem().withArea ("main"),
+                                   GridItem().withArea ("sidebar"),
+                                   GridItem().withArea ("footer"),
+                                   GridItem().withArea (4, 5, 6, 7)
+                                });
+
+            grid.performLayout ({ 350, 250 });
+
+            expect (grid.items[0].currentBounds == Rect (0.f,   0.f,   250.f, 50.f));
+            expect (grid.items[1].currentBounds == Rect (0.f,   50.f,  150.f, 50.f));
+            expect (grid.items[2].currentBounds == Rect (200.f, 50.f,  50.f,  50.f));
+            expect (grid.items[3].currentBounds == Rect (0.f,   100.f, 250.f, 50.f));
+            expect (grid.items[4].currentBounds == Rect (250.f, 150.f, 100.f, 100.f));
+        }
+
+    }
+};
+
+static GridTests gridUnitTests;